Header set X-XSS-Protection "1; mode=block"
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Header set Referrer-Policy "strict-origin-when-cross-origin"
- Header set Content-Security-Policy "default-src 'self' https://oldschool.runescape.wiki; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://oldschool.runescape.wiki; font-src 'self'; frame-ancestors http://unlishema.local https://unlishema.org https://*.unlishema.org"
+ Header set Content-Security-Policy "default-src 'self' https://runescape.wiki https://oldschool.runescape.wiki; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://oldschool.runescape.wiki; font-src 'self'; frame-ancestors http://unlishema.local https://unlishema.org https://*.unlishema.org"
Header set Permissions-Policy "geolocation=(), microphone=(), camera=()"
# Set the Host header to ensure requests target slayer.unlishema.org
color: #2c3e50;
}
+ .left {
+ float: left;
+ width: 48%;
+ margin-right: 2%;
+ }
+
+ .right {
+ float: right;
+ width: 48%;
+ }
+
.container {
- max-width: 800px;
margin: auto;
}
background-color: #fff;
}
- #querySearch {
+ #querySearch,
+ #querySearch-oldschool {
width: 70%;
padding: 8px;
margin-right: 10px;
}
- #querySelect {
+ #querySelect,
+ #querySelect-oldschool {
width: 33%;
padding: 8px;
margin-top: 10px;
}
- #itemSelect {
+ #itemSelect,
+ #itemSelect-oldschool {
width: 70%;
padding: 8px;
margin-top: 10px;
</head>
<body>
- <div class="container">
- <h1>OSRS Wiki CORS Test</h1>
+ <div class="left container">
+ <h1>RS3 Wiki CORS Test</h1>
<p>This page tests CORS with the OSRS wiki and demonstrates fetching data.</p>
+ <input type="button" value="Clear RS3 Search Cache" onclick="clearCache()">
<div class="input-section">
<h3>Search a Bucket</h3>
<label for="querySearch">Enter a bucket API query:</label><br>
<input type="text" id="querySearch"
value="bucket('infobox_item').select('item_name','item_id','image','examine').run()">
- <button onclick="fetchAndDisplayData()">Search</button><br>
+ <button onclick="fetchAndDisplayRS3()">Search</button><br>
<label for="querySelect">Choose an default bucket:</label><br>
<select id="querySelect"></select><br>
</div>
</div>
</div>
+ <div class="right container">
+ <h1>OSRS Wiki CORS Test</h1>
+ <p>This page tests CORS with the OSRS wiki and demonstrates fetching data.</p>
+ <input type="button" value="Clear OSRS Search Cache" onclick="clearCache(true)">
+
+ <div class="input-section">
+ <h3>Search a Bucket</h3>
+
+ <label for="querySearch-oldschool">Enter a bucket API query:</label><br>
+ <input type="text" id="querySearch-oldschool"
+ value="bucket('infobox_item').select('item_name','item_id','image','examine').run()">
+ <button onclick="fetchAndDisplayOSRS()">Search</button><br>
+ <label for="querySelect-oldschool">Choose an default bucket:</label><br>
+ <select id="querySelect-oldschool"></select><br>
+
+ <h3>Select an Item</h3>
+ <label for="itemSelect-oldschool">Choose an item from query:</label><br>
+ <select id="itemSelect-oldschool"></select>
+ </div>
+
+ <div class="data-section">
+ <h3>Extracted Item Data <span style="font-size: 12px;">(Max Shown: 10)</span></h3>
+ <div id="extractedData-oldschool">
+ <p>Select an item to display its data here.</p>
+ </div>
+ </div>
+
+ <div class="raw-data-section">
+ <h3>Raw Data</h3>
+ <div id="rawData-oldschool">
+ <p>Raw JSON data will appear here.</p>
+ </div>
+ </div>
+ </div>
<script>
document.addEventListener("DOMContentLoaded", async () => {
- // Populate the combobox with some default items
- const defaultItems = [
+ // Populate the RS3 combobox with some default items
+ const defaultItemsRS3 = [
+ { name: "Items", query: "bucket('infobox_item').select('item_name','item_id','image','examine').run()" },
+ { name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').run()" },
+ { name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').run()" },
+ ];
+ // Populate the OSRS combobox with some default items
+ const defaultItemsOSRS = [
{ name: "Items", query: "bucket('infobox_item').select('item_name','item_id','image','examine').run()" },
{ name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').run()" },
{ name: "Construction", query: "bucket('infobox_construction').select('page_name', 'image').run()" },
{ name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').run()" },
];
- const queryBox = document.getElementById("querySelect");
- const selectBox = document.getElementById("itemSelect");
+ const queryBoxRS3 = document.getElementById("querySelect");
+ const selectBoxRS3 = document.getElementById("itemSelect");
+ const queryBoxOSRS = document.getElementById("querySelect-oldschool");
+ const selectBoxOSRS = document.getElementById("itemSelect-oldschool");
+
+ // Add default items to the queryBox
+ defaultItemsRS3.forEach(item => {
+ const option = document.createElement("option");
+ option.value = item.query;
+ option.textContent = item.name;
+ queryBoxRS3.appendChild(option);
+ });
// Add default items to the queryBox
- defaultItems.forEach(item => {
+ defaultItemsOSRS.forEach(item => {
const option = document.createElement("option");
option.value = item.query;
option.textContent = item.name;
- queryBox.appendChild(option);
+ queryBoxOSRS.appendChild(option);
});
- // Add event listener to the queryBox using an arrow function
- queryBox.addEventListener("change", (event) => {
+ // Add event listener to the queryBoxRS3 using an arrow function
+ queryBoxRS3.addEventListener("change", (event) => {
handleQueryChange(event, true);
});
- // Add event listener to the selectBox using an arrow function
- selectBox.addEventListener("change", (event) => {
+ // Add event listener to the selectBoxRS3 using an arrow function
+ selectBoxRS3.addEventListener("change", (event) => {
handleQueryChange(event, false);
});
- fetchAndDisplayData(); // Initial fetch with default value
+ // Add event listener to the queryBoxOSRS using an arrow function
+ queryBoxOSRS.addEventListener("change", (event) => {
+ handleQueryChange(event, true, true);
+ });
+
+ // Add event listener to the selectBoxOSRS using an arrow function
+ selectBoxOSRS.addEventListener("change", (event) => {
+ handleQueryChange(event, false, true);
+ });
+
+ fetchAndDisplayRS3(); // Initial fetch with default value
+ fetchAndDisplayOSRS(); // Initial fetch with default value
});
+ // Function to clear the cache
+ function clearCache(oldschool = false) {
+ const prefix = oldschool ? "oldschool.bucketCache_" : "bucketCache_";
+ Object.keys(localStorage).forEach(key => {
+ if (key.startsWith(prefix)) {
+ localStorage.removeItem(key);
+ }
+ });
+ alert("Cache cleared!");
+ }
+
// Function to handle changes in the search input
- function handleQueryChange(event, updateItemList) {
+ function handleQueryChange(event, updateItemList, oldschool = false) {
const newValue = event.target.value;
- document.getElementById("querySearch").value = newValue;
- fetchAndDisplayData(newValue, updateItemList);
+ document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value = newValue;
+ fetchAndDisplayData(newValue, updateItemList, oldschool);
}
// Function to extract the bucket name from the query
return []; // Return an empty array if no match is found
}
+ async function fetchAndDisplayRS3(query, updateItemList = true) {
+ return fetchAndDisplayData(query, updateItemList);
+ }
+
+ async function fetchAndDisplayOSRS(query, updateItemList = true) {
+ return fetchAndDisplayData(query, updateItemList, true);
+ }
+
// Main function to fetch and display data
- async function fetchAndDisplayData(query, updateItemList = true) {
+ async function fetchAndDisplayData(query, updateItemList = true, oldschool = false) {
if (!query)
- query = document.getElementById("querySearch").value;
+ query = document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value;
const bucketName = extractBucketName(query);
const keys = extractSelectKeys(query);
- const extractedDataElement = document.getElementById("extractedData");
- const rawDataElement = document.getElementById("rawData");
+ const extractedDataElement = document.getElementById(`extractedData${oldschool ? "-oldschool" : ""}`);
+ const rawDataElement = document.getElementById(`rawData${oldschool ? "-oldschool" : ""}`);
extractedDataElement.innerHTML = "<p>Loading data...</p>";
rawDataElement.innerHTML = "<p>Loading raw data...</p>";
- const itemData = await requestBucket(query);
+ const itemData = await requestBucket(query, oldschool);
if (itemData) {
// Clear previous content
const item = itemData.bucket[i];
if (updateItemList && itemData.bucket.length > 1) {
+ let itemSelect = document.getElementById(`itemSelect${oldschool ? "-oldschool" : ""}`);
if (i == 0) {
- document.getElementById("itemSelect").innerHTML = "";
- const option = document.createElement("option");
+ itemSelect.innerHTML = "";
+ const option = document.createElement(`option`);
option.value = query;
option.textContent = `--- Select an item ---`;
- document.getElementById("itemSelect").appendChild(option);
+ itemSelect.appendChild(option);
}
// Add each item to the combobox
- const option = document.createElement("option");
+ const option = document.createElement(`option`);
// Build the select query dynamically based on keys
option.value = `bucket('${bucketName}').select(`;
option.textContent = keys ? item[keys[0]] : "No KEYS";
if (!previousItemValue || previousItemValue != item[keys[0]])
- document.getElementById("itemSelect").appendChild(option);
+ itemSelect.appendChild(option);
previousItemValue = item[keys[0]];
}
}
// Function to make a request to the RuneScape wiki API with caching and throttling
- async function requestBucket(query) {
- const url = new URL('https://oldschool.runescape.wiki/api.php');
+ async function requestBucket(query, oldschool = false) {
+ const url = new URL(`https://${oldschool ? "oldschool." : ""}runescape.wiki/api.php`);
const params = {
action: 'bucket',
format: 'json',
};
url.search = new URLSearchParams(params).toString();
- const cacheKey = `bucketCache_${query}`;
+ const cacheKey = `${oldschool ? "oldschool." : ""}bucketCache_${query}`;
const cacheTTL = 24 * 60 * 60 * 1000; // 24 hours in ms
// --- Cache check first ---
Header set X-XSS-Protection "1; mode=block"
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Header set Referrer-Policy "strict-origin-when-cross-origin"
- Header set Content-Security-Policy "default-src 'self' https://oldschool.runescape.wiki; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://oldschool.runescape.wiki; font-src 'self'; frame-ancestors http://unlishema.local https://unlishema.org https://*.unlishema.org"
+ Header set Content-Security-Policy "default-src 'self' https://runescape.wiki https://oldschool.runescape.wiki; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://oldschool.runescape.wiki; font-src 'self'; frame-ancestors http://unlishema.local https://unlishema.org https://*.unlishema.org"
Header set Permissions-Policy "geolocation=(), microphone=(), camera=()"
# Set the Host header to ensure requests target slayer.unlishema.org
color: #2c3e50;
}
+ .left {
+ float: left;
+ width: 48%;
+ margin-right: 2%;
+ }
+
+ .right {
+ float: right;
+ width: 48%;
+ }
+
.container {
- max-width: 800px;
margin: auto;
}
background-color: #fff;
}
- #querySearch {
+ #querySearch,
+ #querySearch-oldschool {
width: 70%;
padding: 8px;
margin-right: 10px;
}
- #querySelect {
+ #querySelect,
+ #querySelect-oldschool {
width: 33%;
padding: 8px;
margin-top: 10px;
}
- #itemSelect {
+ #itemSelect,
+ #itemSelect-oldschool {
width: 70%;
padding: 8px;
margin-top: 10px;
</head>
<body>
- <div class="container">
- <h1>OSRS Wiki CORS Test</h1>
+ <div class="left container">
+ <h1>RS3 Wiki CORS Test</h1>
<p>This page tests CORS with the OSRS wiki and demonstrates fetching data.</p>
+ <input type="button" value="Clear RS3 Search Cache" onclick="clearCache()">
<div class="input-section">
<h3>Search a Bucket</h3>
<label for="querySearch">Enter a bucket API query:</label><br>
<input type="text" id="querySearch"
value="bucket('infobox_item').select('item_name','item_id','image','examine').run()">
- <button onclick="fetchAndDisplayData()">Search</button><br>
+ <button onclick="fetchAndDisplayRS3()">Search</button><br>
<label for="querySelect">Choose an default bucket:</label><br>
<select id="querySelect"></select><br>
</div>
</div>
</div>
+ <div class="right container">
+ <h1>OSRS Wiki CORS Test</h1>
+ <p>This page tests CORS with the OSRS wiki and demonstrates fetching data.</p>
+ <input type="button" value="Clear OSRS Search Cache" onclick="clearCache(true)">
+
+ <div class="input-section">
+ <h3>Search a Bucket</h3>
+
+ <label for="querySearch-oldschool">Enter a bucket API query:</label><br>
+ <input type="text" id="querySearch-oldschool"
+ value="bucket('infobox_item').select('item_name','item_id','image','examine').run()">
+ <button onclick="fetchAndDisplayOSRS()">Search</button><br>
+ <label for="querySelect-oldschool">Choose an default bucket:</label><br>
+ <select id="querySelect-oldschool"></select><br>
+
+ <h3>Select an Item</h3>
+ <label for="itemSelect-oldschool">Choose an item from query:</label><br>
+ <select id="itemSelect-oldschool"></select>
+ </div>
+
+ <div class="data-section">
+ <h3>Extracted Item Data <span style="font-size: 12px;">(Max Shown: 10)</span></h3>
+ <div id="extractedData-oldschool">
+ <p>Select an item to display its data here.</p>
+ </div>
+ </div>
+
+ <div class="raw-data-section">
+ <h3>Raw Data</h3>
+ <div id="rawData-oldschool">
+ <p>Raw JSON data will appear here.</p>
+ </div>
+ </div>
+ </div>
<script>
document.addEventListener("DOMContentLoaded", async () => {
- // Populate the combobox with some default items
- const defaultItems = [
+ // Populate the RS3 combobox with some default items
+ const defaultItemsRS3 = [
+ { name: "Items", query: "bucket('infobox_item').select('item_name','item_id','image','examine').run()" },
+ { name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').run()" },
+ { name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').run()" },
+ ];
+ // Populate the OSRS combobox with some default items
+ const defaultItemsOSRS = [
{ name: "Items", query: "bucket('infobox_item').select('item_name','item_id','image','examine').run()" },
{ name: "Monsters", query: "bucket('infobox_monster').select('name', 'examine').run()" },
{ name: "Construction", query: "bucket('infobox_construction').select('page_name', 'image').run()" },
{ name: "Locations", query: "bucket('infobox_location').select('page_name', 'is_members_only').run()" },
];
- const queryBox = document.getElementById("querySelect");
- const selectBox = document.getElementById("itemSelect");
+ const queryBoxRS3 = document.getElementById("querySelect");
+ const selectBoxRS3 = document.getElementById("itemSelect");
+ const queryBoxOSRS = document.getElementById("querySelect-oldschool");
+ const selectBoxOSRS = document.getElementById("itemSelect-oldschool");
+
+ // Add default items to the queryBox
+ defaultItemsRS3.forEach(item => {
+ const option = document.createElement("option");
+ option.value = item.query;
+ option.textContent = item.name;
+ queryBoxRS3.appendChild(option);
+ });
// Add default items to the queryBox
- defaultItems.forEach(item => {
+ defaultItemsOSRS.forEach(item => {
const option = document.createElement("option");
option.value = item.query;
option.textContent = item.name;
- queryBox.appendChild(option);
+ queryBoxOSRS.appendChild(option);
});
- // Add event listener to the queryBox using an arrow function
- queryBox.addEventListener("change", (event) => {
+ // Add event listener to the queryBoxRS3 using an arrow function
+ queryBoxRS3.addEventListener("change", (event) => {
handleQueryChange(event, true);
});
- // Add event listener to the selectBox using an arrow function
- selectBox.addEventListener("change", (event) => {
+ // Add event listener to the selectBoxRS3 using an arrow function
+ selectBoxRS3.addEventListener("change", (event) => {
handleQueryChange(event, false);
});
- fetchAndDisplayData(); // Initial fetch with default value
+ // Add event listener to the queryBoxOSRS using an arrow function
+ queryBoxOSRS.addEventListener("change", (event) => {
+ handleQueryChange(event, true, true);
+ });
+
+ // Add event listener to the selectBoxOSRS using an arrow function
+ selectBoxOSRS.addEventListener("change", (event) => {
+ handleQueryChange(event, false, true);
+ });
+
+ fetchAndDisplayRS3(); // Initial fetch with default value
+ fetchAndDisplayOSRS(); // Initial fetch with default value
});
+ // Function to clear the cache
+ function clearCache(oldschool = false) {
+ const prefix = oldschool ? "oldschool.bucketCache_" : "bucketCache_";
+ Object.keys(localStorage).forEach(key => {
+ if (key.startsWith(prefix)) {
+ localStorage.removeItem(key);
+ }
+ });
+ alert("Cache cleared!");
+ }
+
// Function to handle changes in the search input
- function handleQueryChange(event, updateItemList) {
+ function handleQueryChange(event, updateItemList, oldschool = false) {
const newValue = event.target.value;
- document.getElementById("querySearch").value = newValue;
- fetchAndDisplayData(newValue, updateItemList);
+ document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value = newValue;
+ fetchAndDisplayData(newValue, updateItemList, oldschool);
}
// Function to extract the bucket name from the query
return []; // Return an empty array if no match is found
}
+ async function fetchAndDisplayRS3(query, updateItemList = true) {
+ return fetchAndDisplayData(query, updateItemList);
+ }
+
+ async function fetchAndDisplayOSRS(query, updateItemList = true) {
+ return fetchAndDisplayData(query, updateItemList, true);
+ }
+
// Main function to fetch and display data
- async function fetchAndDisplayData(query, updateItemList = true) {
+ async function fetchAndDisplayData(query, updateItemList = true, oldschool = false) {
if (!query)
- query = document.getElementById("querySearch").value;
+ query = document.getElementById(`querySearch${oldschool ? "-oldschool" : ""}`).value;
const bucketName = extractBucketName(query);
const keys = extractSelectKeys(query);
- const extractedDataElement = document.getElementById("extractedData");
- const rawDataElement = document.getElementById("rawData");
+ const extractedDataElement = document.getElementById(`extractedData${oldschool ? "-oldschool" : ""}`);
+ const rawDataElement = document.getElementById(`rawData${oldschool ? "-oldschool" : ""}`);
extractedDataElement.innerHTML = "<p>Loading data...</p>";
rawDataElement.innerHTML = "<p>Loading raw data...</p>";
- const itemData = await requestBucket(query);
+ const itemData = await requestBucket(query, oldschool);
if (itemData) {
// Clear previous content
const item = itemData.bucket[i];
if (updateItemList && itemData.bucket.length > 1) {
+ let itemSelect = document.getElementById(`itemSelect${oldschool ? "-oldschool" : ""}`);
if (i == 0) {
- document.getElementById("itemSelect").innerHTML = "";
- const option = document.createElement("option");
+ itemSelect.innerHTML = "";
+ const option = document.createElement(`option`);
option.value = query;
option.textContent = `--- Select an item ---`;
- document.getElementById("itemSelect").appendChild(option);
+ itemSelect.appendChild(option);
}
// Add each item to the combobox
- const option = document.createElement("option");
+ const option = document.createElement(`option`);
// Build the select query dynamically based on keys
option.value = `bucket('${bucketName}').select(`;
option.textContent = keys ? item[keys[0]] : "No KEYS";
if (!previousItemValue || previousItemValue != item[keys[0]])
- document.getElementById("itemSelect").appendChild(option);
+ itemSelect.appendChild(option);
previousItemValue = item[keys[0]];
}
}
// Function to make a request to the RuneScape wiki API with caching and throttling
- async function requestBucket(query) {
- const url = new URL('https://oldschool.runescape.wiki/api.php');
+ async function requestBucket(query, oldschool = false) {
+ const url = new URL(`https://${oldschool ? "oldschool." : ""}runescape.wiki/api.php`);
const params = {
action: 'bucket',
format: 'json',
};
url.search = new URLSearchParams(params).toString();
- const cacheKey = `bucketCache_${query}`;
+ const cacheKey = `${oldschool ? "oldschool." : ""}bucketCache_${query}`;
const cacheTTL = 24 * 60 * 60 * 1000; // 24 hours in ms
// --- Cache check first ---
projects / slayer.unlishema.org / .git / commitdiff