Prompt Title: javascript call http request from https page

Created 1 year ago
Votes 0
Views 272 times
0

Prompt Detail:

Yes, it is possible to make an HTTP request from an HTTPS page using JavaScript and the postMessage API. The basic idea is to create a popup window that navigates to the HTTP URL and then use postMessage to communicate between the HTTPS parent window and the HTTP child window.

Here's an example:

  1. Create a button or link in your HTTPS page that triggers the HTTP request:
html
<button id="http-request">Make HTTP Request</button>
  1. Add an event listener to the button that opens a popup window and sends a message to the child window:
javascript
const button = document.getElementById('http-request'); button.addEventListener('click', () => { const childWindow = window.open('http://example.com/', '_blank', 'height=400,width=400'); window.addEventListener('message', (event) => { if (event.origin === 'http://example.com') { console.log(event.data); } }); childWindow.postMessage('Make HTTP Request', 'http://example.com'); });

In the above code, we first get a reference to the button element and add a click event listener to it. When the button is clicked, we open a popup window using the window.open method and pass the URL of the HTTP endpoint as the first argument.

Next, we add a message event listener to the parent window using the window.addEventListener method. This event listener will be triggered whenever a message is received from a child window.

Finally, we use the postMessage method to send a message to the child window. The first argument is the message payload, and the second argument is the target origin, which in this case is the HTTP endpoint.

  1. In the HTTP child window, add an event listener to receive the message from the parent window and make the HTTP request:
javascript
window.addEventListener('message', (event) => { if (event.origin === 'https://example.com') { fetch('http://example.com/api/data') .then(response => response.json()) .then(data => { event.source.postMessage(data, 'https://example.com'); }) .catch(error => { console.error(error); event.source.postMessage(error.message, 'https://example.com'); }); } });

In the above code, we add a message event listener to the HTTP child window using the window.addEventListener method. This event listener will be triggered whenever a message is received from the parent window.

When a message is received, we check the origin of the message using the event.origin property. This is important for security reasons to prevent cross-site scripting (XSS) attacks.

If the origin is valid, we make an HTTP request to the desired endpoint using the fetch method. Once the response is received, we send the response data back to the parent window using event.source.postMessage.

Note that in the example above, we're sending the response data back to the parent window, which is served over HTTPS, using https://example.com as the target origin. This is important for security reasons to ensure that the response data is only received by the intended recipient.

avatar
kgabsi
Shared 1 prompt
Created 1 year ago

Leave a Comment

Related Tag Prompts

72
0
JavaScript Jedi
1 year ago 2023-02-14 06:35:19 AIPRM
0
0
Learning Programming Basics.
1 year ago 2023-03-08 15:06:52 pawan
0
0
first class function
1 year ago 2023-03-08 16:15:57 Dilshod
0
0
props drilling
1 year ago 2023-03-09 03:28:27 anik
0
0
react query
1 year ago 2023-03-09 10:07:32 rakib
0
0
Java GUI quadratic solver
1 year ago 2023-03-10 18:43:18 Xa3ap
0
0
0
0
Javascript to-do list app
1 year ago 2023-03-13 03:18:54 Simon
0
0
javascript滑块
1 year ago 2023-03-21 08:41:21 QingTool
0
0
This in odoo
1 year ago 2023-03-22 18:11:34 nqvinh
0
0
GatsbyJS Image Swap.
1 year ago 2023-03-30 12:59:59 Ilyas Gosling
0
0
Google Sheets SMS Script
1 year ago 2023-04-03 16:53:35 ben
0
0
webview print problem
1 year ago 2023-04-10 09:28:07 aa
0
0
对象转换的优化
1 year ago 2023-04-18 02:11:47 k
0
0
Описание Node.js
1 year ago 2023-04-19 10:06:01 John Doe