$sanitize on Safari 10.3 with CSP

[steinm91]

I'm submitting a ...

• bug report
• feature request
• other

Current behavior:

In 1.6.5 a new sanitize strategy was introduced for Safari relying on XHR, see this Commit.
Unfortunately these XHR's will be blocked by the Content Security Policy. As a consequence nearly every functionality using the $sanitize service is broken in Safari 10.x, such as ngBindHtml which will not render anything due to the blocked XHR.

Error Message:
Refused to connect to data:text/html;charset=utf-8,%3Cremove%3E%3C/remove%3EHell%3Cem%3Eo%3C/em%3E%20Wor%3Cem%3El%3C/em%3Ed because it appears in neither the connect-src directive nor the default-src directive of the Content Security Policy.

If we allow the scheme-source 'data:' in the directive connect-src it works fine. But since this is considered insecure we don't really want to do that (unless it is safe to do so in this case).

Expected / new behavior:

Components such as ngBindHtml work regardless of the connect-src property.

Minimal reproduction of the problem with instructions:

Do not explicitly allow source data: for the CSP connect-src, see the following plunkr:
http://plnkr.co/edit/fllIl4gQifqIKBKmqFxd?p=preview

AngularJS version: 1.6.5

Browser: Safari 10.3 / iOS 10.3

Anything else:

If there is a CSP setting which is considered secure and works with the current angular version, it would fix this issue for us.

[mgol]

@steinm91 I've tested your Plunkr and it works fine for me in Safari 11.0.3 & 10.1.2 as well as in iOS 11 & 10. It doesn't work in 9.1.3 but that's 2 versions old and we don't support such old Safari, see https://docs.angularjs.org/misc/faq#what-browsers-does-angularjs-work-with-.

[steinm91]

@mgol Thanks for testing, apparently not all 10.x versions are affected.
Do you have a device running iOS 10.3? On my physical device and the emulator on browserstack.com(which both run 10.3) the plunkr does not work due to the XHR getting blocked by CSP.

[mgol]

I was testing on BrowserStack on an iPhone 7 which uses iOS 10.3 and it works fine there, see the screenshot.

[steinm91]

That's interesting... if I use the iPhone 7 (or iPad Pro) I get this:

And the console output:

[mgol]

That's very weird... Are you sure we're testing the same Plunkr? I'm using the link from your description.

[steinm91]

I'm using the one from the description as well, see the console out "Navigated to".
Do you have any idea if there are certain browser settings which I might have activated or something like that?

[Narretz]

So this issue seems to appear on a limited number of devices. I assume if this was a common issue, we'd have had more and earlier reports about this.

[MartinNuc]

I debugged the same issue yesterday in our software. We were not able to reproduce it on Browserstack nor on our machines (with new Safari).

The only device we could reproduce it was Macbook Air 11' MacOS 10.1.4. Siera, Safari 10.1 (12603.1.30.0.34).

Our ng-bind-html stopped to work.

Allowing connect-src data: in our CSP solves this issue however it's discouraged on MDN. Therefore I am not really sure how properly we should solve this issue.

Angular 1.6.5

[Narretz]

I think the solution here is for your users to upgrade their safari. 10.0.3 (there is no 10.3) and 10.1 are not the latest versions. They may be vulnerable to security exploits too and should update to 10.1.2