[cross domain sharing] problems encountered when the front end requests resources

Form writing habits together ！ This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 7 God , Click to see the event details . This is participation fullstackopen 2022 Course Data for Countries Problems encountered in practice .

Realization function

Api restcountries.com  In machine readable format , It provides a large amount of data from different countries . Create an application , You can view data from different countries . Application can be from all Get data in . The user interface is very simple . By typing the search query in the search field , You can find the country to display .

1. Add a weather report for the country's capital to the view that displays data for a single country . There are dozens of weather data providers . Recommended one API yes  openweathermap.org.

2. When less than 10 A country , But more than 1 individual , All countries matching the query are displayed , There is a button next to the country name , When the button is pressed , Show a view of the country :

API Provided to this example JSON Data form ：

1. The weather , Gave the longitude and latitude of the capital

2. Map , Gave a link to the map

use axios.get There was a problem requesting data

1. from OpenWeatherMap Get weather

use axios.get(url,(req,res)=>{ }) The web address requested , Report errors ：

This wave is completely unclear get request url Principle , Misoperation , Directly use the website address provided . After entering the official website, you can see that it actually provides weather query API Interface , Need to register , Generate a api-key, Then use... According to the document , It's simple .

Enter official website , Registered account ： Generate api-key：

Be careful ： Don't put api-key Save to source control Git in , We can't api-key Hard coded into source code . Use environment variables to save the key .

Save the key to .env file ：

# .env
REACT_APP_API_KEY='b2a8f5dc976ea04b6153bbf7b9bfe1b8' 
 Copy code 

And then from process.env Object access key value :

const api_key = process.env.REACT_APP_API_KEY
// variable api_key has now the value set in startup
 Copy code 

The call form can be seen on the official website openweathermap.org/current

use iframe Problems encountered when the framework is embedded in the website

2. Originally wanted to use API Back to us url, direct <iframe src="https://goo.gl/maps/tiQ9Baekb1jQtDSD9"></iframe> A Google map tag , As a result, the browser reported an error ：

reason ： Not all websites , Copy the website directly and give it to iframe/object Nested , The browser will be based on X-Frame-Options To control iframe/object Whether the page of the frame is allowed to load and display , here sameorigin , Indicates that it can only be used by homologous iframe quote , Cross domain iframe I can't show it . So the solution to this problem is generally in server End , Set up http Request header . The website can use this function , To make sure that the content of your website is not nested into someone else's website , Thus avoiding Clickjacking (clickjacking) The attack of .

Click hijacking technology can appear in the form of embedded code or text , Complete the attack without the user's knowledge , For example, clicking on a surface shows “ Play ” A button for a video , In fact, the completed operation is to change the user's social networking site personal information to “ Open ” state .

Must use iframe Nest this map to my own website ？ It depends on whether the website itself provides one that can <iframe> Embedded page code . Including videos that want to embed some video websites , music , You can go directly to the website and find the applicable... Provided by the website itself iframe Code . Click in API Return URL , You can display maps , Found to provide ：

But we can only get this from the database url, You can't get code suitable for nesting （ Unless you write about reptiles ）. Pure front-end cannot solve , Finally find A way of thinking :

Will not be accessible across domains url Of host Set as the domain name of your website , This step is to even if the browser is right url Initiate request , because host Is the domain name of your server , The request will also enter your server ; The second step is to use middleware , Remove the... From the response header x-frame-options Limit . This is similar to simulating the effect of direct access from an empty browser page , Avoid homology restrictions .

Inheritance of source ： Pass in page  about:blank  or  javascript: URL The executed script will inherit to open the URL The source of the document , Because of these types of URLs Does not contain information about the source server .

$At present, it has not been solved in the code , After that, update it again$ Maybe the title requires me to click the button to jump , Set up directly button Of onClick,window.open(event.target.value) solve , Therefore, we should consider whether the requirements and the data provided by the back-end are reasonable ！！！

Homology strategy and cross domain resource sharing

If two URL（Universal Resource Locator Uniform resource locator , Commonly known as web address ） Of agreement protocol/ host host/ port port( If there is a designation ) All the same , Then these two URL It's homologous . Homology policy is an important security policy , It is used to limit how documents from one source or scripts it loads can interact with resources from another source . It can help block malicious documents , Reduce the media that may be attacked . Violating the homology strategy is cross domain .

There are many on the Internet Solving cross domain solutions

CORS  

It's based on HTTP The mechanism of head , Allow the server to declare which origin has access to which resources through the browser .

Proxy forwarding

The same origin policy is the security policy set by the browser , As long as we don't send the request directly through the browser , Instead, the request is sent through the server , The server and the server can request data from each other , There is no cross domain concept , We configure a proxy server to request data from the destination server instead of the client , Then the proxy server returns the requested data to the client .

Browser request response model

Finally, review it ：