<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - CSP: Allow bookmark JavaScript to bypass restrictions"
href="https://bugs.webkit.org/show_bug.cgi?id=156106">156106</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>CSP: Allow bookmark JavaScript to bypass restrictions
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 9.3
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>HTML Events
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>craig+webkit@craigfrancis.co.uk
</td>
</tr></table>
<p>
<div>
<pre>JavaScript running from a bookmark (aka a "bookmarklet"), is run within the origin of the website you are looking at, so any CSP restrictions are applied to it as well.
It could be argued that the end user should be able to bypass any CSP restrictions, as they own and control the device (CSP is not used by the website to stop the end user from doing something to the page).
The same is true of extensions, which typically can bypass CSP restrictions (much to the annoyance of website owners).
---
For example, if a website was to issue the CSP header:
Content-Security-Policy: connect-src 'self';
Then the following bookmark JS, used to pass the current URL to a "todo" website, would be blocked.
javascript:(function(){
var l=window.prompt('Todo note:');
if (l===null) return;
if (l=='') l=document.title;
var r=new XMLHttpRequest();
var t=new Date().getTime();
var n=document.title+"\n\n"+window.location.href.trim();
var u='<a href="https://www.example.com/add/?label='+encodeURIComponent(l)+'&notes='+encodeURIComponent(n)+'&time='+encodeURIComponent(t">https://www.example.com/add/?label='+encodeURIComponent(l)+'&notes='+encodeURIComponent(n)+'&time='+encodeURIComponent(t</a>);
r.open('GET', u, true);
r.withCredentials = true;
r.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
r.onload = function() {
var d = JSON.parse(r.responseText);
if (d.success) {
alert('Added todo item');
} else {
alert('Cannot add todo item: ' + d.error_message);
r.onerror();
}
};
r.onerror = function() {
alert('Error submitting note, will try directly...');
window.location = u;
};
r.send();
})();
Or in compressed form:
javascript:(function()%7B%20var%20l=window.prompt('Todo%20note:');%20if%20(l===null)%20return;%20if%20(l=='')%20l=document.title;%20var%20r=new%20XMLHttpRequest();%20var%20t=new%20Date().getTime();%20var%20n=document.title+%22%5Cn%5Cn%22+window.location.href.trim();%20var%20u='<a href="https://www.example.com/add/?label='+encodeURIComponent(l)+'&notes='+encodeURIComponent(n)+'&time='+encodeURIComponent(t);%20r.open('GET',%20u,%20true);%20r.withCredentials%20=%20true;%20r.setRequestHeader('Content-type',%20'application/x-www-form-urlencoded');%20r.onload%20=%20function()%20%7B%20%20%20var%20d%20=%20JSON.parse(r.responseText);%20%20%20if%20(d.success)%20%7B%20%20%20%20%20alert('Added%20todo%20item');%20%20%20%7D%20else%20%7B%20%20%20%20%20alert('Cannot%20add%20todo%20item:%20'%20+%20d.error_message);%20%20%20%20%20r.onerror();%20%20%20%7D%20%7D;%20r.onerror%20=%20function()%20%7B%20%20%20alert('Error%20submitting%20note,%20will%20try%20directly...');%20%20%20window.location%20=
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>