Every week we deep dive into pressing blockchain programming problems, and show you how Moralis makes solving them simple.

Moralis is here to support you, and eager to be your “wingman” as we build the future of finance together.

If you missed our first issue on IPFS, you can the first edition of the Moralis Magazine here. 

BEHOLD: The Moralis Mage has returned! Read the epic tale of the Moralis Mage here!

Up This Week: SOP and CORS Errors 

This week we take a look at SOP and CORS Errors, and how to fix them.

What is “Same-Origin Policy”?

Same-origin policy (SOP) refers to the portion of the standard web-app security model, which ensures that interactions between web pages (and data provided and produced) can only occur between pages sharing the same “origin” (or data reference method). 

Changes to the data access location, such as port, host-name, and other variables, will cause the SOP check to fail. In the case of a failure, attempts to pass data between pages will be halted.

What are CORS Errors?

When a user attempts to pass data between sites which violate the SOP, an error will be produced. The problem occurs when an error of this type is encountered, where data exchange between the two pages is the intention.

How to Address CORS Errors?

“When you’re running a localhost server to test an application and attempt to access data, it’s cross-origin.”

In testing, CORS errors can be avoided by turning off CORS in the browser. However, this workaround is not sufficient to solve errors in production. 

CORS is only a security measure for web browsers making calls from one site to another site. Users cannot change CORS settings, because CORS settings are provided by the website from which the request was made.

Requests for third-party resources should be processed not by the browser, but by the backend (Moralis Cloud Functions), and only after is the information prepared and given to the site, which is then served to the user.

Additional details on CORS (in general, not related to web3 directly) can be found among the mozilla community resources: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

The only proper solution to CORS is to move processing to the backend, and not do the request processing from the browser. 

Ignoring this rule-of-thumb is unsafe, and can lead to later exploits if left uncorrected. For example: If using a fetch request in your website code, used to access NFT metadata (based on a provided address), may the next day (following an exploit) instead begin sending private data to an altered location. 

Take a look at a brand new instructional video, for a tutorial on overcoming CORS errors:

Alternatively, builders may elect to use the new Moralis Web3API, the API is useful for fetching NFT metadata (among other things) and is effective in sidestepping many of the issues presented in this magazine issue: 

Thanks for reading! We hope you found this week’s Moralis Magazine useful. 

Keep BUIDLING!

See you next time 💚

The Moralis Research Team