Description
This article describes how to modify the content of a webfilter block page based on category.
Scope
FortiGate.
Solution
- Edit the FortiGuard Block Page Replacement Message under System -> Replacement Messages -> FortiGuard Block Page -> Edit.
- Replace %%CATEGORY%% with <span id="cat"> %%CATEGORY%% </span>
- Change the following:
<p>
You have tried to access a web page that is in violation of your Internet usage policy.
</p>
Change it to:
<p id="msg">
You have tried to access a web page that is in violation of your Internet usage policy.
</p>
- Add the Javascript below after the </body>:
<script>
let cat_to_replace = 'Information Technology'; /* Change 'Information Technology' to any Fortiguard Categories.*/
let custom_message_here = 'custom text message here'; /* Change 'custom text message here' to any custom message desired.*/
console.log(cat_to_replace);
console.log(custom_message_here);
let category_value = document.getElementById("cat").innerHTML.trim();
if (category_value === cat_to_replace) {
document.getElementById("msg").innerHTML = custom_message_here;
}
</script>
Replacement Message Sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=EDGE">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
height: 100%;
font-family: Helvetica, Arial, sans-serif;
color: #6a6a6a;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search],
input[type=tel], input[type=text], input[type=time], input[type=url], select, textarea {
color: #262626;
vertical-align: baseline;
margin: .2em;
border-style: solid;
border-width: 1px;
border-color: #a9a9a9;
background-color: #fff;
box-sizing: border-box;
padding: 2px .5em;
appearance: none;
border-radius: 0;
}
input:focus {
border-color: #646464;
box-shadow: 0 0 1px 0 #a2a2a2;
outline: 0;
}
button {
padding: .5em 1em;
border: 1px solid;
border-radius: 3px;
min-width: 6em;
font-weight: 400;
font-size: .8em;
cursor: pointer;
}
button.primary {
color: #fff;
background-color: rgb(47, 113, 178);
border-color: rgb(34, 103, 173);
}
.message-container {
height: 500px;
width: 600px;
padding: 0;
margin: 10px;
}
.logo {
background: url(%%IMAGE:logo_v3_fguard_app%%) no-repeat left center;
height: 267px;
object-fit: contain;
}
table {
background-color: #fff;
border-spacing: 0;
margin: 1em;
}
table > tbody > tr > td:first-of-type:not([colspan]) {
white-space: nowrap;
color: rgba(0,0,0,.5);
}
table > tbody > tr > td:first-of-type {
vertical-align: top;
}
table > tbody > tr > td {
padding: .3em .3em;
}
.field {
display: table-row;
}
.field > :first-child {
display: table-cell;
width: 20%;
}
.field.single > :first-child {
display: inline;
}
.field > :not(:first-child) {
width: auto;
max-width: 100%;
display: inline-flex;
align-items: baseline;
virtical-align: top;
box-sizing: border-box;
margin: .3em;
}
.field > :not(:first-child) > input {
width: 230px;
}
.form-footer {
display: inline-flex;
justify-content: flex-start;
}
.form-footer > * {
margin: 1em;
}
.text-scrollable {
overflow: auto;
height: 150px;
border: 1px solid rgb(200, 200, 200);
padding: 5px;
font-size: 1em;
}
.text-centered {
text-align: center;
}
.text-container {
margin: 1em 1.5em;
}
.flex-container {
display: flex;
}
.flex-container.column {
flex-direction: column;
}
</style>
<title>
Web Filter Violation
</title>
</head>
<body>
<div class="message-container">
<div class="logo">
</div>
<h1>
FortiGuard Intrusion Prevention - Access Blocked
</h1>
<h3>
Web Page Blocked
</h3>
<p id="msg">
You have tried to access a web page that is in violation of your Internet usage policy.
</p>
<table>
<tbody>
<tr>
<td>
Category
</td>
<td>
<span id="cat"> %%CATEGORY%% </span>
</td>
</tr>
<tr>
<td>
URL
</td>
<td>
%%PROTOCOL%%://%%URL%%
</td>
</tr>
</tbody>
</table>
<p>
To have the rating of this web page re-evaluated
<a href="%%FTGD_RE_EVAL%%">
please click here
</a>
.
</p>
<p>
%%OVERRIDE%%
</p>
</div>
</body>
<script>
let cat_to_replace = 'Information Technology'; /* Change 'Information Technology' to any Fortiguard Categories.*/
let custom_message_here = 'custom text message here'; /* Change 'custom text message here' to any custom message desired.*/
console.log(cat_to_replace);
console.log(custom_message_here);
let category_value = document.getElementById("cat").innerHTML.trim();
if (category_value === cat_to_replace) {
document.getElementById("msg").innerHTML = custom_message_here;
}
</script>
</html>
The resulting webfilter block page:
Note
Technical Support does not cover customization-related issues. See this article for more information.
