Skip to content

Instantly share code, notes, and snippets.

@alphabet

alphabet/cq-meme

Last active April 23, 2019 15:58
Show Gist options
  • Save alphabet/5f3766f4feb25fb1f49c3ec9418cb5f7 to your computer and use it in GitHub Desktop.
Save alphabet/5f3766f4feb25fb1f49c3ec9418cb5f7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cq-meme
user is on the landing page (https://cr.org/wtfee/)
they fill out a form
we creates an image using client-side js, tech is html5 canvas, the html5 image is in the data-url attribute
they click submit,
- http get to fetch tokenized upload url via ajax request and generate tokenized serverless file upload url via a lambda
- http post to the tokenized url sends data to s3 (see https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server)
- share buttons set the property for the image using client side js
FB share code would be set like:
function shareNow(file_url_reference){
FB.ui({
method: 'share',
href: 'https://cr.org/wtfee/?img='+file_url_reference,
hashtag: '#wtfee',
redirect_uri:'https://www.facebook.com/dialog/return/close'
}, function(response){});
}
* * *
in VTL
#if( $request.getParameter("file_url_reference"))
#set ($shared_images_root = "https://article.images.consumerreports.org/prod/content/dam/")
#set ($file_url_reference = $request.getParameter("file_url_reference"))
<meta name="og:image" property="og:image" content="$shared_images_root.concat("/").concat($!{file_url_reference})">
#end
<head>
<meta name="og:image" property="og:image" content="$shared_images_root.concat("/").concat($!{file_url_reference})">
<meta name="fb:app_id" property="fb:app_id" content="551478298314138" />
</head>
<body>
<script>
$.ajax('s3 stuff').then('fb share dialog stuff')
<script>
</body>
--------------------------
When a visitor clicks a cr facebook meme post, they get to the meme generator page using the FB.ui.href and they see a blank landing page and can start generating a meme from the beginning
ie. https://cr.org/wtfee/?img='+file_url_reference becomes https://cr.org/wtfee/?img=d5f3857d682e4a36905da228bf8d2bd39d797f5dff5dc4dd4c697a470e9aa7ab
>> go back to line 1
Will infosec be concerned about user's ability to send blasphemy to our serverless upload url?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment