问题
I would like to load an SVG into an object tag and access it's elements. Chrome does not allow this because of Same-Origin-Policy, even though I run this on a web server.
The only workaround I could think of is uploading the image data to the server, saving it there as an image and then returning the url to this image.
Run this snippet in Chrome and the console will show the error below it.
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
var obj = document.querySelector('#obj');
obj.data = 'data:image\/svg+xml;base64,a==';
obj.onload = function() {
doc = obj.contentDocument;
}
}
</script>
</head>
<body>
<object id="obj" type="image/svg+xml"></object>
</body>
</html>
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "http://localhost" from accessing a frame with origin "null". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.
来源：https://stackoverflow.com/questions/33571824/modify-object-data-at-runtime-in-chrome-without-sop