New HTML file import method

[Anonymous]

I’m starting to use the new method to import external HTML files into a page, but the problem is the Cross-browser origin.

<link rel="import" href="html/file.html" />

has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access.

Is there a way to allow cross-browser with javascript or some sort of method that does not require a server, and works on a local computer?

[__]

Are you only concerned with Chrome? or are you using a polyfill (e.g., Polymer)?

Do you understand how CORS works?

Is there a way to allow cross-browser with javascript or some sort of method that does not require a server, and works on a local computer?

CORS requires the cooperation of the server that the content is being requested from.

However, your distinction between “a server” and “a local computer” is misleading: there’s absolutely no reason your local computer cannot run a webserver. In fact, if you’re on Mac or Linux, it probably already has one.

If you’re concerned with this sort of programming, it’s probably time to learn how HTTP works and run a local webserver for development.

[delebash]

I also have a question regarding this. I do know what CORS is and how to deal with it on the server. But I want an app that is not hosted on a server it is just a local app via file://.

According to the polymer site under Using Elements the statement says

Note: You must run your app from a web server for the HTML Imports polyfill to work properly. This requirement goes away when the API is available natively.

Since Chrome latest supports the API natively then I would think we should be able to run apps without a webserver, but back to the CORS issue normally you fix it via server Header’s Access-Control-Allow-Origin “*”

How can you fix this if you are not using a web server?

Thanks,
Dan

[__]

The reason the server requirement “goes away” when imports are supported natively is that the polyfill relies on ajax to request the files. When native imports are available, you can (presumably) just use a file:// url. I don’t know much about the specifics of Chrome’s implementation.

So, questions:

• are you using polymer?
• are you using (supporting) only Chrome, and only recent versions that support imports?

Also, keep in mind that this requirement has nothing to do with “running an app.” It only affects the usage of HTML imports. You could simply include all of your templates, etc. on your main HTML page, and then you would have no need for imports. Yes, this defeats the main advantages of imports, but for now it’s actually not a bad approach. Do development on a server, with a browser that supports imports, and then combine everything into a single page for production.

back to the CORS issue normally you fix it via server Header’s Access-Control-Allow-Origin “*”

A bit off-topic, but just to be clear, CORS is not a “problem” to be solved. It is a solution to the very serious problem of cross-site scripting attacks. It is a way to be sure that browsers and servers agree that a given script is safe and “allowed” to be run on a given site.

Access-Control-Allow-Origin: * is like saying “oh, yeah, whatever.” You’re basically just disabling/ignoring the security precaution. It’s much better to actually grant permission to the specific site(s) the script is intended to be used on.

[delebash]

Thanks for the reply,

I am just experimenting right now so yes I am using only Chrome and since Chrome latest natively supports Web Components there is no longer a need for the platform.js part of Polymer.

I am treating this app as if it where completely local, just as a test, no server involved.

Since Chrome latest now natively supports Html Imports then I am guessing it is no longer using ajax, so I should be able to run locally no webserver, hence no problems with cross-site scripting attacks, so still the question is how to disable CORS locally

You must run your app from a web server for the HTML Imports polyfill to work properly. This requirement goes away when the API is available natively.

Regarding the access control yes the * was just the common example you shouldn’t use that in production.

[__]

Since Chrome latest now natively supports Html Imports then I am guessing it is no longer using ajax, so I should be able to run locally no webserver

I would think so, yes.

so still the question is how to disable CORS locally

To clarify, have you tried this and found that CORS is preventing the imports from working? are you using the file:// protocol or http? Also, despite polymer’s claim that the requirement “goes away,” I’ve found other offhand remarks (in this treehouse article, for example) that indicate CORS does apply to native html imports. So… dunno. You’ll have to do some testing, I guess.

Lastly, are you trying to develop something that will never need a server? or are you just doing testing to learn how all this works? In the latter case, why not install apache? In the former, if all else fails, you could always put your templates directly in your HTML (negating the need for imports).

[delebash]

My thoughts are can you just build a stand alone desktop app that you could just send as a zip file, the user unzip and runs, so no files are server via web server, but you still may have ajax calls to a rest api.

You could think of it in terms of an offline app, the principle should be the same.

I have a dev env with web server and can run the pages fine here is a test

Example polymer test element saved as a file called el.html

`
<link rel=”import” href= bower_components/polymer/polymer.html>

<polymer-element name=”my-button”>
<template>
<style>
button {
display: inline-block;
background: #bada55;
border: 1px solid #6ba4b8;
border-radius: 0.3em;
font-size: 1.4em;
cursor: pointer;
}
</style>
<button><content></content></button>
</template>
<script>
Polymer(‘my-button’);
</script>
</polymer-element>

`

If you open via web-server it works fine, if you just click on it you get this error.

`
Imported resource from origin ‘file://’ has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin ‘null’ is therefore not allowed access. el.html:1

Uncaught ReferenceError: Polymer is not defined
`

Probably need to ask this question in the polymer forum, I will check and see if they know. Maybe the Chrome Html Import may still be a work in progress even though with the latest Chrome it says it is fully supported natively.

[__]

TBH, it makes sense that HTML imports would be subject to the same-origin policy. Polymer’s claim that native imports would not require a server seemed odd, but I never looked into it.

yes, probably a question for the polymer community.

[Author]

Posts