Die Gracefully When Blocked by CSP

[skoskie]

This script failed due to (I believe) some CSP-related setting in Chrome (34.0.1847.116 stable). That's fine. It happens. But the result is a completely transparent iframe over the entire page, leaving the end user to feel as though nothing works. When blocked by CSP, the script should fully remove the iframe it created.

FWIW, when I also tested in Canary with all settings at their default values, it worked just fine. So, I suspect the cause is some setting change I have made that is causing the actual issue, but it's likely others have made the same change, and I am unable to determine what setting actually prevents this from happening. Also, the website this is being tested on has not yet implemented it's own CSP.

[julien51]

Indeed, this is a problem. I'll check to see if I can find a quick and easy solution ASAP. Thanks for reporting!

[julien51]

@eightygrit Shelton, I know it's a long time ago... but whould you be able to tell me on which site/domain this happens so I can debug?

[julien51]

This should also be linked to issue #16

[skoskie]

Well, I ended up not implementing it because of this. It was originally to be placed on http://fitbottomedgirls.com if IIRC.

[julien51]

Shelton, this is a bit sad but I perfectly understand it. I started working on a fix for this. Please, stay tuned for more in the coming weeks.

[skoskie]

Glad to hear it. I still love the project and would like to use it on another project sometime. Cheers.

---

Shelton Koskie | Owner, Eighty Grit Interactive _(707) 456-7543_​ _| ​ *_vCard* http://80gr.it/vcard

On Thu, Aug 14, 2014 at 4:05 PM, Julien Genestoux [email protected] wrote:

Shelton, this is a bit sad but I perfectly understand it. I started working on a fix for this. Please, stay tuned for more in the coming weeks.

— Reply to this email directly or view it on GitHub https://github.com/superfeedr/subtome/issues/75#issuecomment-52236464.

[iagooar]

Is there an update on this?

[julien51]

I should be working on it this week. Luckily, Github can help because it has CSP enabled :)

[julien51]

I just spent an hour on this... and this is a lot trickier than I wanted. Basically, rescuing this is possible, but that complicates the HTML snippet to embed a lot... and this is lame because 99% of websites will not need this. For the last 1%, since they control the site, they can very easily allow content to be loaded via their CSP.

@yagooar @eightygrit could you clarify exactly what you're trying to achieve? (along with the site URL so I can reproduce).

Thanks

[iagooar]

@julien51 All I want or try to do is clicking on the subtome button. After clicking, the complete website is impossible to use.

Any tips on how to allow CSP?

[julien51]

What website are you talking about? On https://subtome.com ? If so, what browser do you use? Also, please define " the complete website is impossible to use." ?

[iagooar]

No, I'm obviously using the button on my own site. This is the url: http://blog.podigee.com/

There, you will find a blue button "Subscribe to blog". It makes the whole site not clickable / usable when I click on it.

[julien51]

Ok, I just tested it on Chrome, Firefox, Safari (all latest versions) and I could use everything as expected (clicked on the button, subscribe thru my favorite reader, then closed the modal... or did another test where I just click on the button and then close the modal), and I'm not sure what you mean by "It makes the whole site not clickable / usable when I click on it.". When I tried, I could click on everything before and after showing the modal.

Please clarify what browser (and OS) you use and what exactly you mean by " It makes the whole site not clickable / usable when I click on it.". I need ot be able to reproduce.

Also, (if you're familiar with this), is there any Javascript message in the javascript console?

[iagooar]

OSX Yosemite 10.10.1 (14B25) Google Chrome version 40.0.2214.94 (64-bit)

Console output:

 Application Cache Error event: Cache creation was blocked by the content policy
259b4c15.vendor.js:5 Error: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at Error (native)
    at Object.L._loadLocal (https://www.subtome.com/scripts/259b4c15.vendor.js:8:28807)
    at Object.L.load (https://www.subtome.com/scripts/259b4c15.vendor.js:8:28532)
    at Object.e [as init] (https://www.subtome.com/scripts/259b4c15.vendor.js:8:18154)
    at f (https://www.subtome.com/scripts/259b4c15.vendor.js:9:12549)
    at b.$get (https://www.subtome.com/scripts/259b4c15.vendor.js:9:13050)
    at Object.d [as invoke] (https://www.subtome.com/scripts/259b4c15.vendor.js:4:13475)
    at https://www.subtome.com/scripts/259b4c15.vendor.js:4:14003
    at c (https://www.subtome.com/scripts/259b4c15.vendor.js:4:13194)
    at Object.d [as invoke] (https://www.subtome.com/scripts/259b4c15.vendor.js:4:13440)
259b4c15.vendor.js:5 Error: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at Error (native)
    at Object.L._loadLocal (https://www.subtome.com/scripts/259b4c15.vendor.js:8:28807)
    at Object.L.load (https://www.subtome.com/scripts/259b4c15.vendor.js:8:28532)
    at Object.e [as init] (https://www.subtome.com/scripts/259b4c15.vendor.js:8:18154)
    at f (https://www.subtome.com/scripts/259b4c15.vendor.js:9:12549)
    at Object.fn (https://www.subtome.com/scripts/259b4c15.vendor.js:9:13040)
    at i.$get.i.$digest (https://www.subtome.com/scripts/259b4c15.vendor.js:5:17771)
    at i.$get.i.$apply (https://www.subtome.com/scripts/259b4c15.vendor.js:5:19070)
    at https://www.subtome.com/scripts/259b4c15.vendor.js:4:4367
    at Object.d [as invoke] (https://www.subtome.com/scripts/259b4c15.vendor.js:4:13475)
85cd37a9.scripts.js:1 There was an error, so we could not load the services from the localStorage.  DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. {message: "Failed to read the 'localStorage' property from 'Window': Access is denied for this document.", name: "SecurityError", code: 18, stack: "Error: Failed to read the 'localStorage' property …w.subtome.com/scripts/259b4c15.vendor.js:3:30804)", INDEX_SIZE_ERR: 1…}
85cd37a9.scripts.js:1 There was an error, so we could not load the subscriptions from the localStorage.  DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. {message: "Failed to read the 'localStorage' property from 'Window': Access is denied for this document.", name: "SecurityError", code: 18, stack: "Error: Failed to read the 'localStorage' property …w.subtome.com/scripts/259b4c15.vendor.js:3:30804)", INDEX_SIZE_ERR: 1…}
259b4c15.vendor.js:5 Error: [$injector:cdep] Circular dependency found: 
http://errors.angularjs.org/1.2.6/$injector/cdep?p0=
    at https://www.subtome.com/scripts/259b4c15.vendor.js:3:30474
    at c (https://www.subtome.com/scripts/259b4c15.vendor.js:4:13087)
    at d (https://www.subtome.com/scripts/259b4c15.vendor.js:4:13440)
    at Object.e [as instantiate] (https://www.subtome.com/scripts/259b4c15.vendor.js:4:13587)
    at $get (https://www.subtome.com/scripts/259b4c15.vendor.js:4:29734)
    at link (https://www.subtome.com/scripts/259b4c15.vendor.js:8:13273)
    at q (https://www.subtome.com/scripts/259b4c15.vendor.js:4:23046)
    at h (https://www.subtome.com/scripts/259b4c15.vendor.js:4:19271)
    at https://www.subtome.com/scripts/259b4c15.vendor.js:4:18940
    at $get.i (https://www.subtome.com/scripts/259b4c15.vendor.js:4:19684) <div ng-view="" class="ng-scope">

I have tested it with all add-ons disabled in private browsing mode.

By "It makes the whole site not clickable / usable when I click on it" -> after clicking the button, there appears an iframe that takes the whole page and prevents from clicking any element on the site. Only reloading the page helps.

This is what appears in the dom after clicking the button:

<iframe style="display:block; position:fixed; top:0px; left:0px; width:100%; height:100%; border:0px; background: transparent; z-index: 2147483647" src="https://www.subtome.com/?subs/#/subscribe?resource=http%3A%2F%2Fblog.podigee.com&amp;feeds=http%3A%2F%2Fblog.podigee.com%2Fblog.xml"></iframe>

[julien51]

So, that's annoying, because I too am using Chrome Version 40.0.2214.94 (64-bit) on 10.10.2 (14C109) (not the same OS version, but I don't think this would matter here). Could this be this issue? Basically, do you have this "Block third-party cookies and site data" setting enabled?

[update]: tried this and indeed it looks like I'm able to reproduce. Let's see if we can find a way to gracefully inform the user that this setting will prevent SubToMe from working.

[iagooar]

Cool, actually disabling the "Block third-party cookies and site data" setting fixes the problem, so there you have it ;)

[julien51]

Yup! After investigating further, i found that it's a problem with the localization library that we use. I have posted an issue there hoping that we can get this resolved very soon. If not, we will have to find another way to cache all localization to keep subtome fully offline.

[iagooar]

Awesome, thanks for taking the time! :clap:

[julien51]

No, thank you for the bug report :) I think it's not actually the issue mentioned earlier, but still... it helps make things better.

[julien51]

Getting there :) i18next has been updated. We'll report ASAP.