I have a Tomcat 10 setup in a development environment with a custom 403 error page. My 403 error page look something like this.
<html>
<head>
<link rel="stylesheet" type="text/css" media="all"
title="Default" href="default/style-1.0.2.css" />
<link rel="alternate stylesheet" type="text/css" media="all" title="Paper White"
href="default/print-1.0.1.min.css" />
<title>403 Forbidden</title>
</head>
<body>
<h3>You do not have required permissions to view this page.</h3>
</body>
</html>
When I reproduce this, I am getting a 403 error while accessing external CSS files.
403 error screenshot
My theory is that as the tomcat recognizes this request as 403, it is not allowing the request to access the underlying CSS resources as well.
Is there a way to bypass this?
Related
I have a react application , which I created with Create React App. The app is working fine in development, but in production , the CSS styles are not getting applied. I noticed that, the generated index.html file has the link tag for the bundled stylesheet (main.e72c9739.css), but browser is not downloading the CSS ( there is no network invocation in the dev tools ). The file does get downloaded, when I try manually by entering the address of the URL.
Here is the index.html code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<base href="/proxy/myusername/services/someserviceid/proxy/8098/"/>
<link rel="icon" href="favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="logo192.png"/>
<link rel="manifest" href="manifest.json"/>
<title>React App</title>
<script defer="defer" src="/proxy/myusername/services/someserviceid/proxy/8098/static/js/main.01dd9c66.js"></script>
<link src="/proxy/myusername/services/someserviceid/proxy/8098/static/css/main.e72c9739.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<h1>Hello</h1>
</body>
</html>
One difference I noticed was, in case of development, the css is not explicitly referred via link tag, all the CSS definitions are available in the bundle.js file (along with some code of CSS_LOADER_EXPORT module).
P.S. The application is deployed in a subpath, and I am using nginx for forwarding the request to react app running on a different port. I also do response modification for appending the base path of the URL.
Forbidden You don't have permission to access this resource.Server unable to read htaccess file, denying access to be safe
link here
<link rel="stylesheet" id="bootstrap-css" href="{{ url('') }}/assets/css/bootstrap.css" type="text/css" media="all">
I have ubunto server working with nginx,
and after running npm run build in my react project, the build directory created with the path static/css/main.ca4e3296.chunk.css -> and that is the main css file of the project.
After ftp that build directory to the server, I checked this file and it transfered successfully, but on the production it's value is all the index.html content (I have no idea why).
I also copy paste all the static/css/main.ca4e3296.chunk.css file's content from the server to the browser and it's all the css worked again, which means the problem here is that file that it's value changes from the server to the browser.
Also, in the console, I get this message:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://bucard.co.il/static/css/main.ca4e3296.chunk.css".
By the way, this is my index.html page if it's couses the issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bucard | Digital Business Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="canonical" href="https://bucard.co.il/" />
<link rel="icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Assistant:wght#300&display=swap" as="style"
onload="this.rel='stylesheet'" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" as="style"
onload="this.rel='stylesheet'" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="title" content="Bucard | Digital Business Card" />
<meta name="description"
content="Bucard - Digital Card Website" />
<!-- some analytics -->
<meta property="og:locale" content="he_IL" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Bucard | Digital Business Card" />
<meta property="og:image" content="https://bucard.co.il/favicon.ico" />
<meta property="og:description"
content="Bucard - Digital Card Website" />
<meta property="og:url" content="https://bucard.co.il/" />
<meta property="og:site_name" content="Bucard" />
</head>
<body>
<div id="root"></div>
</body>
</html>
Any help please ? Or maybe it's Nginx problem?
This problem causes only on production.
edit: Just saw that removing GENERATE_SOURCEMAP=false from .env file solved the problem, but the components are shown again. so that's temporary solution.
I just looked at the source code of your website, there's no CSS file named main.ca4e3296.chunk.css there.
It's probably the nginx routing settings that causes the redirect to your 404 page, which is fine.
You need to remember that with each new build the output files' names change, and the main index.html file is updated as well to link to the new files, so main.ca4e3296.chunk.css may have existed sometime in the past but not anymore. Currently, both 2.b42aba3b.chunk.css and main.a6f3b637.chunk.css are responding as expected.
If I were you I'd read more about your bundler (most likely Webpack)
I have created a simple web site in asp.net and I have used the two js file on my page Code of
customerpage.aspx page
<head runat="server">
<title>Sample Site</title>
<!-- jQuery -->
<script type="text/javascript" src="http://localhost:63645/Customer/GetResources?resourceName=CUST.Data.Scripts.3rdParty.jquery.min.js"></script>
<script src="http://localhost:63645/index.js"></script>
<link rel="stylesheet" href="http://localhost:63645/index.css">
</head>
I have used the ajax call.
When I ran the project it gives me error the server responded with a status of 401 (Unauthorized).
To use External java-script it might need username and password, so I have download these files to my local folder where project exists and tried to run the project and still getting same error.
Code after downloaded the files to local.
<script src="js/CUST.Data.Scripts.3rdParty.jquery.min.js"></script>
<script src="js/index.js"></script>
<link href="css/index.css" rel="stylesheet" />
I don't know what is wrong. Any help will be much appreciated.
After spending time I have found the solution by changing
Change:
settings.AutoRedirectMode = RedirectMode.Permanent;
To:
settings.AutoRedirectMode = RedirectMode.Off;
We have used font awesome in our application. When the application is hosted onto IIS, we are unable to see proper font.
Otherwise running via Visual Studio gives proper fonts.
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style-metro.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
This is the section from master page file.
Adding the following lines to Web.Configs system.WebServer tag worked.
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
You can do that or alternatively register the MIME TYPES in IIS. If you are an admin, you can register it at a server level and all sites will work. A reboot of the site or IIS is required. In that case, remove the explicit registration from your web.config file.