Send Authentication header with JS using HTML "IFrame" on Partner's Custom Menu
Do appreciate if you can check the idea and see if this is possible. The idea is to allow the iframe of custom menu to be able to accept custom headers key values from bot. As Directly modifying the request headers for a request initiated by an iframe (like setting custom headers) is restricted due to the same-origin policy and browser security limitations. However, we can achieve a similar outcome by using JavaScript to make an AJAX request using the Fetch API with custom headers, and then dynamically insert the response into the iframe. Sample can be something like ... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom Request Headers</title> <script> document.addEventListener('DOMContentLoaded', function() { fetch('YOUR_URL_HERE', { method: 'GET', // or 'POST' headers: { 'Custom-Header': 'HeaderValue', // Add any other headers here }, }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.text(); // or response.json() if you expect a JSON response }) .then(data => { // Here you can insert the data into the iframe directly if it's HTML // or into another element if you need to process it document.getElementById('your-iframe-id').contentWindow.document.body.innerHTML = data; // Or use this to insert into a div: document.getElementById('your-div-id').innerHTML = data; }) .catch(error => { console.error('There was an error:', error); }); }); </script> </head> <body> <iframe id="your-iframe-id" style="width:600px; height:400px;"></iframe> <!-- Or a div where you can place the content --> <!-- <div id="your-div-id"></div> --> </body> </html> Replace 'YOUR_URL_HERE' with the URL you wish to fetch, and adjust the method and headers as needed for your request. This example uses fetch to make a request with custom headers and then injects the response into an iframe. Keep in mind that inserting HTML directly into an iframe like this works when the page and the iframe are served from the same domain. For different domains, you'll encounter restrictions due to the browser's same-origin policy. For security reasons, modern web standards and browsers limit what can be done from within iframes and with cross-origin requests to protect users from various types of web-based attacks, such as clickjacking and cross-site scripting. If you control the server hosting the iframe's content, consider enabling CORS (Cross-Origin Resource Sharing) for specific requests or using server-side methods to set custom headers for your requests. So user allow to enter the Header Key pairs ONLY*. Not editing the HTML or can they edit the script content. The key values is generated.
Attached images
Discussion
Voters
Powered by FeedBear