0

For the purposes of authoring HTML content that is intended to be viewed offline, for example:

  • when distributed on a USB thumb drive as documentation accompanying a physical product
  • as promotional content distributed at a physical event, or
  • as an instruction manual downloaded once from a company server and then archived for later reference

How can HTML-based simple site be authored so that it avoids running into CORS issues?

This question is for situations where a web server is not used, and any dynamically served content (if any at all) would be handled by JavaScript.

I realize there is already a lot of info on the web regarding CORS, but it seems to vary a lot depending on the use case and specific configuration, naturally. For this reason I have decided to ask specifically about how to manage it within the context of a website made for offline viewing. The first big difference from other resources I have seen, for example, is the question of what to set for document.domain when there is no domain. That's just the beginning of the issues.

Hopefully there is a solution that is not too complex, since the site itself would be rather simple in its architecture.

For example, when the volume is mounted, there may be simply an HTML file and a folder:

  • 📄index.html
  • 📁resources

Thanks.

Improve this question
5
  • "How can HTML-based simple site be authored so that it avoids running into CORS issues?" - are you facing any specific issue currently? Also, why is this tagged with CSRF? If you don't plan to post any stuff to any other system, CSRF should not be involved in your project at all Commented Jul 17 at 9:24
  • @NicoHaase The CSRF tag was for attracting people knowledgeable about CORS, since the topics are closely related. But I suppose it can be removed. Commented Jul 21 at 4:59
  • 1
    It could help to show some code that you've tried and any kind of error message that you're facing with that. Also, please don't ask multiple questions within a single post. Either focus on the "offline" part (where no server is involved) or the "online" one, and then ask a specific question ("configurations that involve a server" is way too broad) Commented Jul 21 at 7:38
  • There are lots of things that require CORS. To avoid running into CORS issues (for offline access or otherwise) is to not use them. The ways to work around needing to do something which normally would require CORS permissions is often going to be specific to that particular something. Your question needs more focus. Remember that the tour says "Focus on questions about an actual problem you have faced. Include details about what you have tried and exactly what you are trying to do.". Right now this question is about a wide set of hypoteticals. Commented Jul 21 at 13:26
  • For some contexts, you could get away packaging everything into one giant HTML file, including entire JS libraries. e.g. At one workplace, for internal use we needed an offline web app for a special purpose on a machine not on the internet and running a custom OS. We had CORS issues, some of which maybe could be solved with time, however instead I made the project build step output to one giant HTML file (300kb) with all resources injected inline, including the entire Vue library. If you opened the final HTML file, of course you saw a wall of code... like 1000's of lines (or whatever). Commented Jul 21 at 13:28

1 Answer 1

Reset to default
-2

CORS issues can be avoided while creating an offline website. The content must be hosted locally by downloading dependencies locally and using relative paths. Cross-Origin request must be avoided. While testing with XHR and Fetch, "file://" must be avoided. A service worker can be used for advanced online behavior. APIs must be used with a CORS proxy. Headers must be set correctly on the local servers.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks. I've accepted your answer. I was kind of hoping you could elaborate more on certain points, such as "A service worker can be used for advanced online behavior." What would be considered advanced online behavior? What is an example where a a service worker would be advisable? "APIs must be used with a CORS proxy." How does one set up a CORS proxy? "Headers must be set correctly on the local servers." How to make sure the headers are correctly set? Although your answer is basically on-point, I don't feel it addresses the issue in quite enough detail to be a complete solution.
I recommend not accepting answers which haven't lead to a solution for your problem. It risks the green tick lending authority to something which is incorrect.
"The content must be hosted locally by downloading dependencies locally and using relative paths." — That's not true. Plenty of things can be loaded cross origin freely.
"A service worker can be used for advanced online behavior." — I was under the impression that service worked required HTTP to be installed. How do you set up a service worker without that?
"APIs must be used with a CORS proxy." — That's untrue. A CORS proxy just adds CORS headers for a website that doesn't have them. What's wrong with just adding the appropriate headers directly to the API?
"Headers must be set correctly on the local servers." — What local servers? The entire premise of the question is that there isn't a local server.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.