My angular production build (ng build --configuration=production) produces the result quoted below. See line 10. So the stye is inlined for some reason. Just this part other styles are properly moved to a css file.
Because of that I am getting error:
Refused to execute a script for an inline event handler because 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy.
My current nginx settings:
add_header Content-Security-Policy "object-src 'none';script-src 'self';script-src-elem 'self';base-uri 'self';" always;
The error red line in development panel in Safari points to the line 10
When I add unsafe-inline flag in the Content-Security-Policy header in nginx the error goes away but this defeats security.
How would I prevent ng build from inlining css ? I am using node 16 and angular 13 and materials.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basket</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style> <!-- HERE-->
html, body {
height:100%
}
body {
margin: 0;
font-family: Roboto, Helvetica Neue, sans-serif
}
</style>
<link rel="stylesheet" href="styles.99caafd74a8389d7.css" media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="styles.99caafd74a8389d7.css">
</noscript>
</head>
<body>
<app-root></app-root>
<script src="runtime.42e3e9782c7613ef.js" type="module"></script>
<script src="polyfills.3a4d88207580181e.js" type="module"></script>
<script src="main.664d5eeb134bd6ea.js" type="module"></script>
</body>
</html>
The source css looks like this:
#use '#angular/material' as mat;
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif;}
The source html is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body class="bg-green-400 h-screen">
test
</body>
</html>
Doesn't work. What can be the reason for this?
Any of the utility classes added to the body tag won't work
Your sample HTML doesn't include a stylesheet, so the bg-green-400 and h-screen classes aren't defined.
In production you should use a proper purged CSS file, but for testing you can load Tailwind from a CDN using this:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Here's a fiddle of your HTML with this stylesheet included, and both of the classes you've used are working: https://jsfiddle.net/vrung30L/
I'm trying to make a bootstrap badge a different color. I'm a bit new to frontend work, so this is probably an embarrassing question, but I built the following CSS:
.badge .badge-danger{
color:#FFFFFF;
}
And added the new CSS after the original one...
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="content/custom.css"/>
Yet I see no change! Why?
You can change the badge's background color. 'color' changes text's color while 'background-color' is use to change the background of badge.
.badge-danger {
color: #fff;
background-color: #3545dc;
}
I have this:
← Medical Device Solutions
However, the arrow is not displayed when using Lato as:
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&subset=latin-ext" rel="stylesheet">
I also have, just in case:
<meta charset="utf-8">
The arrow character is displayed as a strange symbol. What could be the problem here? Thanks!
works for me maybe you have a typo? and next time share your code eh
html {
font-family: lato;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
</head>
<body>
<p>← Medical Device Solutions</p>
</body>
</html>
I have an chrome app,with and iframe inside
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<title>Title</title>
</head>
<body >
<div class="container-fluid">
<iframe id="iframe" src="home.html" frameborder="0" height="150%" style="width: 100%;"></iframe>
</div>
</div>
</body>
</html>
in web is loading, but when it is called from index in the chrome app ,bootstrap-theme.css is not loading
I've tried too adding type="text/css" , but neither.
<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.css">
Does this work for you?
solution:
as #SaucedApples said but without the dot.
<link href="/css/bootstrap-theme.css" rel="stylesheet" />
I think you should allow this files to be appended at the manifest.json, something like this:
"content_scripts": [
{
"matches": ["http://test-website.com/*"],
"js": ["js/content-script.js"],
"css" : ["yourcss.css"]
}
],
Ive been working on trying to change the font to CircularPro Bold , however when I load my page it doesnt render , instead it defaults to Times New Roman. Could use some help to figure out why its not rendering
I am using one layout for my static landing page.
Thanks
Layout.erb looks like this
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Info</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://lineto.com/The+Fonts/Font+Categories/Text+Fonts/Circular/Bold/" rel='stylesheet' type='text/css'>
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/modern-business.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
Modern-Business.css looks like this
#font-face {
font-family:"CircularPro Bold";
src:url(fonts/lineto-circular-pro-bold.eot?#iefix) format(embedded-opentype),
url(fonts/lineto-circular-pro-bold.woff) format(woff),
url(fonts/lineto-circular-pro-bold.ttf) format(truetype),
url(fonts/lineto-circular-pro-bold.svg#CircularProBold) format(svg);
font-weight:400;
font-style:normal;
font-size: 4em;
}
h2{
font-family: 'CircularPro Bold';
}