How to implement X-Content-Type-Options security header?

Hosting Support
1

Website URL: Special Cakes for All Occasions

(please specify the URL of the site on which you are experiencing the problem)

Error Message

(please share the FULL error message you see, if applicable)

Other Information

I’m trying to improve my website’s security by implementing the X-Content-Type-Options header. I’ve tried:

  1. Adding to .htaccess
  2. Using PHP headers in a separate file

But the security header is still not being applied (verified through Mozilla Observatory and securityheaders.com scans).

Could someone please advise:

  1. Is it possible to set custom security headers on InfinityFree hosting?
  2. If yes, what’s the correct way to implement them?
  3. Are there any specific restrictions or requirements for security headers?

Thank you!

2

The scanning tools will most likely be blocked because of this

7 Likes
3

I checked out your webpage and to only return 1singel error is pure awesome!

Ill post the Error calls i received from Firefox distro on Fedora41, Are these the errors you are reffering to on your webpage?

1st:
Loading failed for the with source “https://polyfill.io/v3/polyfill.min.js”. index.php:53:58

2nd:
Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at https://errors.infinityfree.net/errors/404/ because it violates the following directive: “img-src ‘self’ data:”

Though i do not know how to sort out the interactions of your page and infinityfree - I use a ai called CoPilot to help direct my studding efforts copilot.microsoft.com it is super helpful for spell checking code, discovering new coding methods and working out errors. Perhaps it my be helpful to you!

Good Luck
-Jedi

4

you give me hope for all of humanity. thanks Jedi

5

Cheers, so glad to have any response at all

6

it seems like a bad file path to one of your images. the 404 errors i usually get a related to miss-Capitalization of a file path or file name.

Incorrect file paths like:

  1. drive/“Spaces sometimes need quotations around them”/pic.jpg.
  2. drive/realfilenameiscapitalized/Pic.jpg.

I notice you have no user accounts or user generated data, why is it that you are linking cloud flair via this line here?:

it seems to me that this cloud flair normalization is better used to workout compatibility issues with lines of code, as those are the errors mybrowser is returning on my end.

i asked microsofts ai simplify your styles and this is what it returned! feel free to tinker with it

@charset "utf-8";

/* Root Variables */
:root {
    --primary-color: #E94D40;
    --secondary-color: #0C243C;
    --background-color: #FAF3E0;
    --text-color: #333;
    --white: #ffffff;
    --border-radius: 8px;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Base Styles */
body {
    font-size: 1.2em;
    line-height: 1.5;
    font-family: Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 0 40px;
    margin: 0;
}

h1, h2, h3 {
    color: var(--primary-color) !important;
    margin-top: 0;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover, a:focus {
    text-decoration: underline;
}

/* Layout Components */
header, section {
    padding: 20px;
    margin: 20px 0;
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

/* Header Specific */
header h1 {
    color: var(--primary-color) !important;
    padding-left: 120px;
    margin-bottom: 20px;
}

/* Navigation */
nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

nav a {
    color: var(--secondary-color) !important;
    padding: 10px;
    transition: background-color 0.3s ease;
}

nav a:hover, nav a:focus {
    background-color: #f1f1f1;
    border-radius: var(--border-radius);
}

/* Images */
.logo, .banner-image, .shop-image, .about-image, .product-image {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: var(--border-radius);
}

.banner-image {
    height: 360px;
    object-fit: cover;
}

.shop-image, .about-image, .product-image {
    height: auto;
}

.product-image {
    width: 300px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.product-image:hover {
    transform: scale(1.05);
}

/* Products Section */
.products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
}

article {
    flex: 1 1 300px;
    max-width: 400px;
    padding: 20px;
    text-align: center;
}

/* Tables */
.prices, .job-opportunities {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.prices th, .prices td, .job-opportunities th, .job-opportunities td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.prices th, .job-opportunities th {
    background-color: #f2f2f2;
    color: var(--secondary-color) !important;
}

.prices tr:hover, .job-opportunities tr:hover {
    background-color: #f1f1f1;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--secondary-color);
}

input, select, textarea {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    font-size: 1em;
}

textarea {
    resize: vertical;
    min-height: 100px;
}

.submit-button, input[type="submit"] {
    width: 100%;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 14px 20px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.submit-button:hover, input[type="submit"]:hover {
    background-color: #d32f2f;
}

/* Footer */
footer {
    color: var(--secondary-color);
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}

/* Utility Classes */
.burntred { color: var(--primary-color); }
.navyblue { color: var(--secondary-color); }
.floatleft { float: left; }
.floatright { float: right; }
.clearboth { clear: both; }

/* Media Queries */
@media screen and (max-width: 768px) {
    body {
        padding: 0 20px;
    }

    header h1 {
        padding-left: 0;
        text-align: center;
    }

    nav {
        flex-direction: column;
        align-items: center;
    }

    .banner-image {
        height: 200px;
    }

    article {
        flex: 1 1 100%;
    }
}

The smallness of your page is not very proportional to the amount of “css” you have going on, though your css is interesting and clever!

My end is not working very well today, so ill check back in when i get that worked out.

1 Like
7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.