jquery - Receive Uncaught SecurityError when accessing SVG objects from Javascript

Question

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.

Answer 1

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 also does not have this limitation, so there is that option as well.