5

I am working on web pages to be included as zipped documentation for a product, so it is expected to be unzipped and only be accessed locally via file:///

The web pages already exist, I only have to give them a facelift. They don't have CSS. I would like to add CSS. To avoid having to change thousands of pages, I'd like to insert CSS via JavaScript. The pages are in a frame (the other frame is a menu). Adding CSS from the parent window to the frame yields the error: Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. when trying to access the frame's document object, for example.

Is there a way to ignore same-origin policy for web pages served this way?

This question doesn't seem to be a duplicate because it wants to use localhost

Obay
  • 3,053
  • 12
  • 49
  • 74
  • 1
    What are you trying to do that's running afoul of the same-origin policy? Can you simply do something different? – Brad Aug 15 '18 at 02:39
  • If you want to deliver a zip file from your webpage, it has to be done via backend so it's my understanding. You can do it localhost, but it should be your backend grabbing and delivering your zip file. This is not convenient for a customer as usually they do not setup a localhost environment for this task. – K F Aug 15 '18 at 03:05
  • @Brad I'm giving existing HTML documentation of a product a facelift, putting it in a frame. The pages are numerous, so to avoid changing the existing html pages, I'd like to insert CSS (via JavaScript) to all pages that appear on that frame. – Obay Aug 15 '18 at 05:07
  • 2
    This is not possible, and for good reason. If it was possible, websites would have unwarranted access to any files in your filesystem they could guess the path to. – Patrick Roberts Aug 15 '18 at 05:48
  • 1
    Have the `FRAME` contact the parent DOM instead of the parent DOM contacting the child `FRAME`. The parent can then answer back. The child DOM can also pass back a reference to itself for manipulation from the parent. https://stackoverflow.com/a/2620789/105539 – Volomike Aug 15 '18 at 05:49
  • One of the easiest ways to achieve safe cross-origin communication would be to use the [`postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) API. This would require you to edit each of the HTML files, but simply append a ` – Patrick Roberts Aug 15 '18 at 05:57
  • Why are you not just appending the CSS file to the page?? Only option is to run the browser with a flag to ignore it... – epascarello Sep 17 '18 at 14:41
  • Why multipage exactly? I myself have to do standalones webpages quite often, with huge css, rasters, a few libs, webworkers, and a lot of other things, and all that sit on a single html page. Resources that would normally be fetched are just dataURI encoded, or even converted as blobURIs on the fly. – Kaiido Sep 17 '18 at 15:16

2 Answers2

0

Firefox as a quite simple Add-On for this.

Smartis
  • 4,669
  • 3
  • 29
  • 44
  • Firefox considers the current folder and its sub-folders as same origin. So probably no need for an add on. – Kaiido Sep 17 '18 at 15:12
-1

You can start Chrome disabling web security --disable-web-security

It will allow more than just evade CORS, but if you are doing it just for development purposes with your own codabase, it's safe.

You should close any chrome window before starting the secureless session.

chromium-browser --disable-web-security --user-data-dir="[some directory here]"

Amet Alvirde
  • 1,273
  • 2
  • 10
  • 21