How to verify the preview query parameters of the visual editor?

FAQ
How to verify the preview query parameters of the visual editor?

If the user opens your page in Storyblok, we add a few parameters which you can use to securely validate their use of the edit mode.

You will need that validation to load the right version of your content to the right users. The draft version is for the editor and the published version is for the public.

A simple validation would be to check if there is the _storyblok parameter in url. This could be done in the frontend or in the backend. But for a secure check we recommend to implement the logic in the backend and validate the _storyblok_tk parameter.

Code Examples

Here are some examples of how to securely check if the user is in edit mode:

        
      import crypto from 'crypto'
// getQueryParam = access requests URL param by name

let validationString = getQueryParam('_storyblok_tk[space_id]')
  + ':' + YOUR_PREVIEW_TOKEN
  + ':' + getQueryParam('_storyblok_tk[timestamp]')
let validationToken = crypto.createHash('sha1')
  .update(validationString)
  .digest('hex')

if (getQueryParam('_storyblok_tk[token]') == validationToken &&
    getQueryParam('_storyblok_tk[timestamp]')
    > Math.floor(Date.now()/1000)-3600) { 
  // you're in edit mode.
  this.editMode = true 
}

        
      $sb = $app['request']->query->get('_storyblok_tk');
if (!empty($sb)) {
    $pre_token = $sb['space_id'] . ':' . YOUR_PREVIEW_TOKEN
      . ':' . $sb['timestamp'];
    $token = sha1($pre_token);
    if ($token == $sb['token']
        && (int)$sb['timestamp'] > strtotime('now') - 3600) {
      // you're in edit mode.
      $app['config.storyblok.edit_mode'] = true;
    }
}