jon_simon
jon_simon

Reputation: 380

Flask-Talisman breaks Flask-Bootstrap

I want my website to always redirect to the secure https version of the site, and I'm using flask-talisman to do this. However for some reason adding this seemingly-unrelated line of code is breaking the flask-bootstrap formatting on my website.

This is what the original __init__.py file and website looked like before adding flask-talisman:

from flask import Flask
from config import Config
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_bootstrap import Bootstrap
from flask_heroku import Heroku


app = Flask(__name__)
app.config.from_object(Config)
Bootstrap(app)
heroku = Heroku(app)
db = SQLAlchemy(app)
migrate = Migrate(app, db)

from app import routes, models

enter image description here

And this is what the __init__.py file and website look like after adding flask-talisman:

from flask import Flask
from config import Config
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_talisman import Talisman
from flask_bootstrap import Bootstrap
from flask_heroku import Heroku


app = Flask(__name__)
app.config.from_object(Config)
Bootstrap(app)
Talisman(app)
heroku = Heroku(app)
db = SQLAlchemy(app)
migrate = Migrate(app, db)

from app import routes, models

enter image description here

Changing the order of the lines Bootstrap(app) and Talisman(app) doesn't make any difference either. Any ideas? I want my website to be secure, but not at the cost of breaking all of the formatting.

Upvotes: 6

Views: 3339

Answers (3)

andreas
andreas

Reputation: 1

in addition to the default-src, I added font-src as well to prevent the message: Refused to load the font 'data:font/truetype;charset=utf-8;base64,

csp = {
    'default-src': [
        '\'self\'',
        'cdnjs.cloudflare.com'
    ],
    'font-src': [
        '\'self\'',
        'data:',
        'cdnjs.cloudflare.com'
    ]
}

Upvotes: 0

Sneakerhead Farb
Sneakerhead Farb

Reputation: 311

Building on jrborba's answer above, this is what I have used to prevent Tailsman from breaking Bootstrap and jQuery, but you may not need to use the unsafe-inline line as I did.

csp = {
    'default-src': [
        '\'self\'',
        '\'unsafe-inline\'',
        'stackpath.bootstrapcdn.com',
        'code.jquery.com',
        'cdn.jsdelivr.net'
    ]
}
talisman = Talisman(app, content_security_policy=csp)

Upvotes: 4

jrborba
jrborba

Reputation: 148

It's an old thread, but the answer is that you need to whitelist your allowed sites, like in this example (directly from flask-talisman web site):

csp = {
 'default-src': [
        '\'self\'',
        'cdnjs.cloudflare.com'
    ]
}
talisman = Talisman(app, content_security_policy=csp)

Upvotes: 11

Related Questions