juplo.de Git - website/blob

   1 ---
   2 _edit_last: "2"
   3 author: kai
   4 categories:
   5   - css
   6   - grunt
   7   - html(5)
   8   - less
   9   - nodejs
  10 date: "2015-08-25T15:16:32+00:00"
  11 guid: http://juplo.de/?p=481
  12 parent_post_id: null
  13 post_id: "481"
  14 title: Bypassing the Same-Origin-Policy For Local Files During Development
  15 url: /bypassing-the-same-origin-policiy-for-loal-files-during-development/
  16
  17 ---
  18 ## downloadable font: download failed ...: status=2147500037
  19
  20 Are you ever stumbled accross weired errors with font-files, that could not be loaded, or SVG-graphics, that are not shown during local development on your machine using `file:///`-URI's, though everything works as expected, if you push the content to a webserver and access it via HTTP?
  21 Furthermore, the browsers behave very differently here.
  22 Firefox, for example, just states, that the download of the font failed:
  23
  24 ```bash
  25
  26 downloadable font: download failed (font-family: "XYZ" style:normal weight:normal stretch:normal src index:0): status=2147500037 source: file:///home/you/path/to/font/xyz.woff
  27
  28 ```
  29
  30 Meanwhile, Chrome just happily uses the same font.
  31 Considering the SVG-graphics, that are not shown, Firefox just does not show them, like it would not be able to at all.
  32 Chrome logs an error:
  33
  34 ```bash
  35
  36 Unsafe attempt to load URL file:///home/you/path/to/project/img/sprite.svg#logo from frame with URL file:///home/you/path/to/project/templates/layout.html. Domains, protocols and ports must match
  37
  38 ```
  39
  40 ...though, no protocol, domain or port is involved.
  41
  42 ## The Same-Origin Policy
  43
  44 The reason for this strange behavior is the [Same-origin policy](https://en.wikipedia.org/wiki/Same-origin_policy "Read more about the Same-origin policy on wikipedia").
  45 Chrome gives you a hint in this direction with the remark that something does not match.
  46 I found the trail, that lead me to this explanation, while [googling for the strange error message](https://bugzilla.mozilla.org/show_bug.cgi?id=760436 "Read the bug-entry, that explains the meaning of the error-message"), that Firefox gives for the fonts, that can not be loaded.
  47
  48 _The Same-origin policy forbids, that locally stored files can access any data, that is stored in a parent-directory._
  49 _They only have access to files, that reside in the same directory or in a directory beneath it._
  50
  51 You can read more about that rule on [MDN](https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file%3A_URIs "Same-origin policy for file: URIs").
  52
  53 I often violate that rule, when developing templates for dynamically rendered pages with [Thymeleaf](http://www.thymeleaf.org/ "Read more about the XML/XHTML/HTML5 template engine Thymeleaf"), or similar techniques.
  54 That is, because I like to place the template-files on a subdirectory of the directory, that contains my webapp ( `src/main/webapp` with Maven):
  55
  56 ```
  57
  58 + src/main/webapp/
  59   + css/
  60   + img/
  61   + fonts/
  62   + thymeleaf/templates/
  63
  64 ```
  65
  66 I packed a simple example-project for developing static templates with [LESS](http://lesscss.org/ "Read more about less"), [nodejs](https://nodejs.org/ "Read more about nodejs") and [grunt](http://gruntjs.com/ "Read more about grunt"), that shows the problem and the [quick solution for Firefox](#quick-solution "Jump to the quick solution for Firefox") presented later.
  67 You can browse it on my [juplo.de/gitweb](/gitweb/?p=examples/template-development;a=tree;h=1.0.3;hb=1.0.3 "Browse the example-project on juplo.de/gitweb"), or clone it with:
  68
  69 ```bash
  70
  71 git clone /git/examples/template-development
  72
  73 ```
  74
  75 ## Cross-Browser Solution
  76
  77 Unfortunately, there is no simple cross-browser solution, if you want to access your files through `file:///`-URI's during development.
  78 The only real solution is, to access your files through the HTTP-protocol, like in production.
  79 If you do not want to do that, the only two cross-browser solutions are, to
  80
  81 1. turn of the Same-origin policy for local files in all browsers, or
  82
  83 1. rearrange your files in such a way, that they do not violate the Same-origin policy (as a rule, all resources linked in a HTML-file must reside in the same directory as the file, or beneath it).
  84
  85 The only real cross-browser solution is to circumvent the problem altogether and serve the content with a local webserver, so that you can access it through HTTP, like in production.
  86 You can [read how to extend the example-project mentioned above to achieve that goal](/serve-static-html-with-nodjs-and-grunt/ "Read the article 'Serving Static HTML With Nodjs And Grunt For Template-Development'") in a follow up article.
  87
  88 ## Turn Of Security
  89
  90 Turning of the Same-origin policy is not recommended.
  91 I would only do that, if you only use your browser, to access the HTML-files under development ‐ which I doubt, that it is the case.
  92 Anyway, this is a good quick test to validate, that the Same-origin policy is the source of your problems ‐ if you quickly re-enable it after the validation.
  93
  94 Firefox:
  95  Set `security.fileuri.strict_origin_policy` to `false` on the [about:config](about:config)-page.
  96  Chrome:
  97  Restart Chrome with `--disable-web-security` or `--allow-file-access-from-files` (for more, see this [question on Stackoverflow)](http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome "Read more on how to turn of the Same-origin policy in chrome").
  98
  99 ## Quick Fix For Firefox
 100
 101 If you develop with Firefox, there is a quick fix, to bypass the Same-origin policy for local files.
 102
 103 As the [explanation on MDM](https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file%3A_URIs "Read the explanation on MDM") stats, a file loaded in a frame shares the same origin as the file, that contains the frameset.
 104 This can be used to bypass the policy, if you place a file with a frameset in the topmost directory of your development-folder and load the template under development through that file.
 105
 106 In [my case](#my-case "See the directory-tree I use this frameset with"), the frameset-file looks like this:
 107
 108 ```html
 109
 110 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
 111 <html>
 112   <head>
 113     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 114     <title>Frameset to Bypass Same-Origin-Policy
 115   </head>
 116   <frameset>
 117     <frame src="thymeleaf/templates/layout.html">
 118   </frameset>
 119 </html>
 120
 121 ```