Receive Uncaught SecurityError when accessing SVG objects from Javascript
d3.js, html, javascript, jquery, svg
Solution
In Chrome, it is not possible to access an external SVG's contents via JavaScript when the page is opened through the file system (i.e. the URL has the `file://` protocol).
To get around this, you can open it through a local server. Alternately, you can disable the Same-Origin Policy web security feature for testing using `--disable-web-security` command line argument.
Firefox and probably some other browsers at one point did not have this limitation but that appears to no longer be the case. For security, modern browser generally restrict programmatic access to local file data.
Problem
Today I've been spending a bit of time trying to manipulate SVGs with D3 (and jQuery). My goal is being able to access/modify local SVGs through JavaScript. Doesn't matter if it's tailored to D3 but that would be extra points. It seems the solution that works for other people isn't working for me, which has the following JavaScript: ``` window.onload=function() { // Get the Object by ID var a = document.getElementById("svgObject"); // Get the SVG document inside the Object tag var svgDoc = a.contentDocument; // Get one of the SVG items by ID; var svgItem = svgDoc.getElementById("svgItem"); // Set the colour to something else svgItem.setAttribute("fill", "lime"); }; ``` with this HTML `object` ``` <object id="svgObject" data="img/svgfile.svg" type="image/svg+xml" height="50" width="50"></object> ``` and separate SVG file ``` <svg height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"> <rect id="svgItem" width="800" height="800" fill="red"></rect> <circle cx="400" cy="400" r="400" fill="blue"></circle> </svg> ``` all found here. It's a simplified version of the code found in this example. My JavaScript code is shown below, straight up out of my editor: ``` window.onload = function() { var checkObject = document.getElementById("checkers"); var checkDoc = checkObject.contentDocument; var cheese = checkDoc.getElementById('layer1'); console.log(cheese); }; ``` In case it changes anything, my script is loaded at the bottom of the HTML's body. Below is my only HTML element. ``` <object data="check.svg" type="image/svg+xml" width="100" id="checkers"></object> ``` and my SVG file (just a gray check, feel free to use). ``` <svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <g id="layer1" transform="translate(0,-952.36217)"> <path id="rawCheck" fill="#dbdbdb" d="m18.75,1004.5,21.607,21.607,40.893-40.893-7.8571-7.8572-33.036,33.036-13.75-14.107z" stroke-opacity="0"/> </g> </svg> ``` My issue comes from calling `.contentDocument` on `checkObject`, which should just be calling `.contentDocument` on the `object` element but I get this mess: Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. Except it was all angry red color. This confused me, because as far as I can see, my code is pretty close to a copy of the working example, yet here I am. I have also tried the `d3.xml()` seen in this question's answer and received the following error XMLHttpRequest cannot load file:///home/user/Documents/examples/d3/check.svg. Cross origin requests are only supported for HTTP. as well as Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///home/user/Documents/examples/d3/check.svg' If you'd like to see more details on my `d3.xml()` attempt I'm happy to update this question, I just thought there were a lot of code blocks already.