Flask-Talisman breaks Flask-Bootstrap

Question

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

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

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.

Dolomite

I've gotten around the problem by using SSLify in place of Talisman, but the SSLify repo says that the best practice is to use Talisman instead, so I'd still like to get this working if possible. github.com/kennethreitz/flask-sslify – Dolomite

Answer 1

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)

Barbarity

Answer 2

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)

Umlaut

This worked for me partly however it doesn't seem to load the fonts from "fonts.googleapis.com" at all. Do you have any suggestions? – Ovarian

Answer 3

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'
    ]
}

Subbasement