0

I'd like to embed an iframe on my site that is hosted locally but I can't because the referrer policy is set to 'strict-origin-when-cross-origin'.

enter image description here

The src for the iframe is from a website that is made for the purpose of embedding into an iframe so there is no restrictions in the response headers from the src. I also know this because if I put the link for the src directly into my iframe like so :

 <iframe id="panoramic" style="border: 4px solid white" frameBorder="0" v-bind:src="https://momento360.com/e/u/47de8a9ca774487aa1f2bffb9c9fcc94?utm_campaign=embed&utm_source=other&heading=0&pitch=0&field-of-view=75&size=medium"></iframe>

it works with no issues. The problem is the iframe src is reactive (using Vue) so when it tries to update to the new src my browser is blocking it because of the referrer policy on my site. I've tested this with browsers that default to 'no-referrer' and it will load, but unfortunately chrome defaults to a strict referrer policy.

I'm using Flask to handle the routing so I figured there was a way to easily change this but from what I've found there isn't. I've found Flask-Talisman but the default settings on this extension are extremely strict and ideally I'd like a lighter-weight way of changing this policy.

This is the route handling for the page I'd like to have the no-referrer policy:

@app.route('/scene_build')
def sceneBuilder():
    resp = Response(render_template('scene_build.html', profile = session['userData']))
    resp.headers["Referrer-Policy"] = 'no-referrer'
    return resp
sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Nick
  • 25
  • 10

2 Answers2

2

If you want to set the Referrer-Policy header for all requests, you can do so like this:

from flask import Flask

app = Flask(__name__)

@app.after_request
def set_headers(response):
    response.headers["Referrer-Policy"] = 'no-referrer'
    return response

@app.route('/')
def index():
    return 'Hello world!'

if __name__ == '__main__':
    app.run()

If you want to set the header for specific endpoint:

from flask import Flask, make_response

app = Flask(__name__)

@app.route('/')
def index():
    response = make_response('Hello world!')
    response.headers["Referrer-Policy"] = 'no-referrer'
    return response

if __name__ == '__main__':
    app.run()

See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy for valid referrer policies.

vremes
  • 654
  • 2
  • 7
  • 10
  • I've actually already tried this solution but it doesn't modify the Referrer-Policy header for some reason. I can change other headers in the same way you're describing (i.e. `resp.headers["Access-Control-Allow-Origin"] = '*'`) but I can't seem to change security headers in the same way which is what led me to believe I needed to use Flask-Talisman. – Nick Feb 25 '21 at 21:20
0

Figured out the issue. Turns out socketIO disables cors by default which is why I couldn't set the Referrer-Policy in the conventional way. I changed the params of the socketIO instantiation to socketio = SocketIO(app, cors_allowed_origins="*") and it works.

Nick
  • 25
  • 10