4

I have a page + javascript which reads a users SVG file into a HTML < object >'s data, and then modifies the SVG's DOM using javascript.

EDIT: The user selects a file from their own file system using an input field of type file.

This all works well within firefox, but both edge and chrome balk citing the single-origin policy (as I understand it, chrome spits out

Blocked a frame with origin "null" from accessing a cross-origin frame.

while edge just refuses to read the objects data).

If I understand the single-origin policy well enough, and the risks involved, edge and chrome's refusal to play with the loaded SVG is legitimate. Firstly, am I mistaken?

Secondly, how do I get past this problem? Is there a way? Would having the user upload the SVG to the server and then have it loaded in (so that it shares the origin as my page) work - and if so, is this safe?

I am looking for the "proper" way to do this: safe for my site, safe for the user, etc.

Thanks

Similar questions:

Apologies if I should have done something with these questions rather than ask again. I was hoping that with more current techniques a solution might be found.

eff
  • 385
  • 2
  • 8
  • Have you tried to use `` directly inside the HTML an put the file in there ? – Walle Cyril Oct 31 '17 at 19:59
  • No, it's not safe, that's why browsers try to stop you doing it. Some people will go to extraordinary lengths to shoot their own foot off though. – Robert Longson Oct 31 '17 at 21:16
  • @Walle Cyril: Surprisingly, this works (maybe add this as an answer?). Thanks! This is possibly because of the horribly hacky way I managed to do this: I load the file's text and prepend this text to a div's innerHTML. I'm not surprised this circumvents security measures! Pretty horrid. – eff Nov 01 '17 at 11:36
  • @Robert Longson: Given that javascript is client side, and it's their svg which is to be loaded (and I'm assuming they're not trying to hack themselves), what's not safe? Thanks for your input. – eff Nov 01 '17 at 11:38
  • It's not clear to me the origin of the svg files. – Robert Longson Nov 01 '17 at 11:40
  • @RobertLongson: Edited. The user selects a file from their own filesystem. Apologies for not being clear. Does this affect your opinion? – eff Nov 01 '17 at 11:45

1 Answers1

1

Use <svg> directly inside the HTML an put the file in there.

Because user upload their own file, there should be no risk.

You should still verify if the svg file is indeed a valid svg file without onload, <script> etc inside. It is possible to validate svg without executing it. Use a white-list strategy and do this before using innerHTML. (Because users could have received a malicious svg file per message from an attacker for instance). Never trust user input.

Walle Cyril
  • 3,087
  • 4
  • 23
  • 55
  • As noted above, this is functional. I'm not accepting it as the answer as yet as there are those two hoops to jump through to make it safe (check it's just an svg I'm embedding, and check the svg doesn't contain malicious scripts or calls), both of which I could easily stuff up! – eff Nov 02 '17 at 09:44
  • 1
    No one else has come up with anything safer, so I can only assume this is the best way. Thanks! – eff Nov 26 '17 at 15:35