Meno: @import url usando http invece di https dopo minification

sto ottenendo questo errore:Meno: @import url usando http invece di https dopo minification

Mixed Content: The page at 'https://theculprit.com/url' was loaded over HTTPS, but requested an insecure font 'http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf'. This request has been blocked; the content must be served over HTTPS.

Quando ho guardato attraverso la fonte per trovare dove il tipo di carattere è stato importato tramite HTTP anziché HTTPS, l'unica linea di pertinenza di un'importazione carattere era:

@import url('//fonts.googleapis.com/css?family=Open+Sans:400,700,300,600,800');

Inizialmente ho pensato HTTPS assets loading over HTTP potrebbe essere il mio errore, ma il tipo di carattere è già importato utilizzando il protocollo fonti. Questo succede solo dopo che il codice è stato minimizzato.

Non ho molta familiarità con i caratteri/css/less, quindi sono completamente perso. Se ci sono altre informazioni che posso dare per aiutare fammi sapere.

fonte

2015-02-19 Aaron

Sei sicuro che l'importazione si stia verificando come https? L'URL che causa il problema proviene dal CSS che stai importando, non dalla linea di JS. https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600,800 –

@MatthewGreen Sono sotto il presupposto che l'avvio di un'importazione con "// myurl" faccia automaticamente la richiesta con il protocollo della fonte del chiamata. È sbagliato? So che la linea di JS non è ciò che sta causando l'errore, l'ho appena elencato come un altro bit di informazione. – Aaron

Dovrebbe funzionare in questo modo. Lo si può vedere quando si preme l'URL font.googleapis che il protocollo cambia per i collegamenti in quel CSS in base a ciò che si usa. Tuttavia, chiaramente non sta funzionando in questo caso.Vorrei provare a utilizzare un protocollo per vedere se l'errore scompare e quindi vedere se forse l'importazione CSS sta effettivamente utilizzando il protocollo sbagliato. –

Si scopre che il minifier sto usando automatically trasforma un'importazione a partire //myurl-http://myurl e che stava causando il mio problema. Ho aggiunto processImport: falseoption e ora tutto funziona come previsto.

Un problema è stato aperto per questo comportamento su GitHub.

fonte

2015-02-20 17:28:39 Aaron

Se si sta ospitando un sito su https, si verificheranno problemi nell'importazione di file esterni tramite il protocollo http.

Ti consiglio di scaricare il carattere di google e di ospitarlo sul sito stesso.

o un'altra opzione.

È possibile utilizzare i caratteri Web senza importare file esterni. Puoi includere i caratteri direttamente nel tuo file css usando i dati uri. Per prima cosa dovrai scaricare il font google.

convertire i file in una stringa di dati (dataurlmaker)

Crea il tuo @ font-face per esempio.

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), 
     url('webfont.woff2') format('woff2'), 
     url('webfont.woff') format('woff'), 
     url('webfont.ttf') format('truetype'), 
     url('webfont.svg#svgFontName') format('svg'); 
}

e sostituire gli URL con i valori dei dati

fonte

2015-02-19 22:38:25 Jackson

Stavo affrontando lo stesso problema. Ma non volevo usare la soluzione di @ Aaron in questo modo qualsiasi mia mia @import non funzionasse. Un'alternativa migliore potrebbe essere:

{processImportFrom: ['!fonts.googleapis.com']}

Così come nel mio caso sorso stava cambiando fonts.googleapis.com a http://fonts.gstatic.com ora come il mio sito è stato il https cromo stava dando errore. "lista nera" questo usando l'opzione sopra ha funzionato per me. Anche se penso che ci siano altre opzioni là fuori, come, opzione per aggiungere le importazioni https.

fonte

2016-03-14 06:19:00 Abhishek

Meno: @import url usando http invece di https dopo minification

risposta

Problemi correlati