<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Origin Helper Tools</title> <style> body font-family: monospace; padding: 2rem; background: #f5f5f5; pre background: #fff; padding: 1rem; border-left: 4px solid #007acc; button margin: 0.5rem 0; padding: 0.5rem 1rem; cursor: pointer; </style> </head> <body> <h1>🔧 Origin Helper Tools</h1> <p><strong>Current origin:</strong> <code id="originDisplay"></code></p> <p><strong>Parent origin (if iframe):</strong> <code id="parentOrigin"></code></p> <button id="testFetch">Test GET to /api/ping</button> <pre id="output">Ready. Send postMessage commands:</pre>
// Helper: send message back to parent function respondToParent(command, data) if (window.parent !== window) window.parent.postMessage( type: 'origin_helper_response', command: command, data: data, origin: window.location.origin , '*'); // In production, restrict to specific parent origin else output.innerHTML += `\n> Response (no parent): $command -> $JSON.stringify(data)`; origin_helper_tools.html
Next time you face a cross-origin wall, try dropping this file onto the remote origin. You might be surprised how much clarity a single <script> tag can bring. <script> const originDisplay = document
<script> const originDisplay = document.getElementById('originDisplay'); const output = document.getElementById('output'); // Show current origin originDisplay.textContent = window.location.origin; // Show parent origin if in iframe try if (window.parent !== window) const parentOrigin = document.referrer ? new URL(document.referrer).origin : 'unknown'; document.getElementById('parentOrigin').textContent = parentOrigin; else document.getElementById('parentOrigin').textContent = 'not in iframe'; catch(e) document.getElementById('parentOrigin').textContent = 'blocked by cross-origin'; const output = document.getElementById('output')