Unable to create memory game – JS errors

It looks like this may be the symptom of something else. This will only happen if there are no cards in the game. Are they there when you edit the content?
Are you able to share a link to a page where this is failing so I could have a look?

Hi @icc0rz ,

You are correct, there are no cards in the game – but that is because I have not been given the option to create any. I tried to create another memory game to analyze the errors there and got:

Recorder.js:74 Refused to create a worker from 'blob:https://coi-csod.org/6009bd45-edd1-4839-b6f4-2a5e94e1ce06' because it violates the following Content Security Policy directive: "script-src * 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

…as well as

Uncaught DOMException: Failed to construct 'Worker': Access to the script at 'blob:https://coi-csod.org/6009bd45-edd1-4839-b6f4-2a5e94e1ce06' is denied by the document's Content Security Policy.
    at new t (https://coi-csod.org/wp-content/uploads/h5p/libraries/H5PEditor.AudioRecorder-1.0/dist/h5p-editor-audio-recorder.js?ver=1.0.4:1:116850)
    at new e (https://coi-csod.org/wp-content/uploads/h5p/libraries/H5PEditor.AudioRecorder-1.0/dist/h5p-editor-audio-recorder.js?ver=1.0.4:1:6724)
    at createTabInstance (https://coi-csod.org/wp-content/plugins/h5p/h5p-editor-php-library/scripts/h5peditor-av.js?ver=1.15.0:224:29)
    at C.H5PEditor.widgets.video.H5PEditor.widgets.audio.H5PEditor.AV.C.appendTo (https://coi-csod.org/wp-content/plugins/h5p/h5p-editor-php-library/scripts/h5peditor-av.js?ver=1.15.0:237:11)
    at Object.ns.processSemanticsChunk (https://coi-csod.org/wp-content/plugins/h5p/h5p-editor-php-library/scripts/h5peditor.js?ver=1.15.0:475:19)
    at ns.Group.appendTo (https://coi-csod.org/wp-content/plugins/h5p/h5p-editor-php-library/scripts/h5peditor-group.js?ver=1.15.0:127:8)
    at VerticalTabs.self.addItem (https://coi-csod.org/wp-content/uploads/h5p/libraries/H5PEditor.VerticalTabs-1.3/vertical-tabs.js?ver=1.3.7:391:12)
    at List.<anonymous> (https://coi-csod.org/wp-content/plugins/h5p/h5p-editor-php-library/scripts/h5peditor-list.js?ver=1.15.0:43:21)
    at List.call (https://coi-csod.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-event-dispatcher.js?ver=1.15.0:209:26)
    at List.EventDispatcher.trigger (https://coi-csod.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-event-dispatcher.js?ver=1.15.0:240:12)

hi @icc0rz,

My previous response is currently held for moderation – but in short:

Trying to create a memory game loads with only the title and returns a Recorder.js error on line 74: “Refused to create a worker”

• This reply was modified 4 years, 7 months ago by doyenwilliams.

Your web server is setting a CSP header that is refusing the JavaScript to run in your browser. You will have to update your web server configuration to include ‘script-src blob:’ in that header. Alternatively, you could try to force your browser to ignore the CSP header.

Here’s some more details on the header: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

• This reply was modified 4 years, 7 months ago by icc0rz.

hi @icc0rz,

What would the complete thing look like? I am a bit of a script-kiddie so please be patient with me.

Also – I see where this could have been set in the <meta>. Can the plugin set this <meta> value to better guarantee a uniform user experience? Again, please be patient as my understanding does not extend to this level.

Thanks for your help!

Ah, I see. Well if you don’t know if you’ve configured this your self in the webserver configuration chances are that you’ve enabled a plugin that has done this for you, or you might be using a web hosting service that is setting it for you. Start by looking for files called .htaccess. There may be one in your wordpress installation folder, but also in the wp-content/uploads. Check both and see if they contain a line like this:
Header add Content-Security-Policy "default-src 'self';"

If it’s not in the files, look in your wp-config.php and in settings for any third-party plugins you may have enabled. You could also try searching for Content-Security-Policy in the folders.
If you find the line/definition I’ll help you update it so that it works.

Me again @icc0rz ,

Following your advice I searched and couldn’t find anywhere that declared the headers – so I assumed it was a WP core thing.

The current setting seems to be script-src * 'self' 'unsafe-inline' 'unsafe-eval'

I have added the plugin HTTP Headers (to improve website security) to help me ease into this configuration, so what would you recommend the new script-src value be set to?

Thanks for the patience and assistance.

Just adding a space + blob: to script-src field should do the trick.

• This reply was modified 4 years, 7 months ago by icc0rz.

Got it working @icc0rz – thanks for the help and patience!

For anyone who may have a similar error:

1. Get the HTTP Headers (to improve website security) plugin
2. On the “CSP Options” tab configure AT LEAST the script-src to read * 'self' 'unsafe-inline' 'unsafe-eval' and save
3. Test your configuration at securityheaders.com. IF your headers are working there but H5P is STILL not working, then you have something rewriting the headers in the admin section… if so, continue to next step
4. On the “.htaccess” tab of HTTP Headers (to improve website security) click “Disable Rewrite Headers” and copy the .htaccess rules displayed into the very top of your own .htaccess file. That should fix things!

Hope this helps someone!