The offline search feature in Lunr.js seems to be malfunctioning

Currently, I'm attempting to activate Lunr.js offline search on my Hugo site using the Docsy theme.

In my config.toml file, I have made the following adjustments:

# Enable Lunr.js offline search
offlineSearch = true
offlineSearchSummaryLength = 70
offlineSearchMaxResults = 10

I have also disabled the algolia_docsearch and gcs_engine_id entries.

Locally, on my Mac, the search feature functions correctly.

However, upon deployment to S3 backed by CloudFront, I encounter the following error:

Refused to load the script 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="48243d263a087a667b">[email protected]</a>/lunr.min.js' due to a Content Security Policy violation. This is because the directive "script-src 'self' https://code.jquery.com https://stackpath.bootstrapcdn.com https://cdnjs.cloudflare.com" is being violated. It's worth noting that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

After some experimentation, I discovered that the CDN 

'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7519001b0735475b465b4d">[email protected]</a>/lunr.min.js'
is causing the issue.

Upon adding the following CDN, the issue is resolved:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.9/lunr.min.js" integrity="sha512-4xUl/d6D6THrAnXAwGajXkoWaeMNwEKK4iNfq5DotEbLPAfk6FSxSP3ydNxqDgCw1c/0Z1Jg6L8h2j+++9BZmg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The submodules used in my Hugo project can be found at https://github.com/google/docsy/tree/2bedb2ff278eddba4a7fc4441ca6bf7a42caeb68

By default, these submodules include 

"https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83eff6edf1c3b1adb0adbb">[email protected]</a>/lunr.min.js"
and do not provide the option to switch it to 
"https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.9/lunr.min.js"

My main concern is resolving this Content Security Policy issue to enable "offline-search" without being hindered by the submodule overwrites preventing the addition of a content security meta tag. For reference, here is the link to the submodules: https://github.com/google/docsy/tree/2bedb2ff278eddba4a7fc4441ca6bf7a42caeb68

javascripthugodocsy

Answer №1

If you want to ensure your search functionality works offline while working locally, it's essential not to depend on external servers on the web.

Even if you try to use Cloudflare as a solution, there's a risk that it will fail once the file is no longer accessible in your local cache.

The best approach is to download the necessary files, save them in /static/js/ directory (guaranteeing offline access), and adjust the URLs to point to these local files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on filling in credentials in Facebook popup using Webdriver with Javascript

On my website, I have a feature where users can authenticate using Facebook. Currently, my site is not public, but you can see a similar process in action at agar.io. Just click on "Login and play" and then click on "Sign in with Facebook". This will open ...

javascriptfacebookselenium-webdriver

Is there a way for me to adjust my for loop so that it showcases my dynamic divs in a bootstrap col-md-6 grid layout?

Currently, the JSON data is appended to a wrapper, but the output shows 10 sections with 10 rows instead of having all divs nested inside one section tag and separated into 5 rows. I can see the dynamically created elements when inspecting the page, but th ...

javascriptjqueryjsonajaxtwitter-bootstrap

"JavaScript encountered an Uncaught TypeError: Cannot read property 'style' of undefined

Looking to create a local time clock using HTML, here is the code: <body> <div class="container text-center"> <div class="row"> <div class="col-xs-12 col-sm-6"> & ...

javascript

Optimizing the performance of J2EE web applications

I am currently working on enhancing the performance of my web application. The application is java-based and is hosted on an Amazon cloud server with JBoss and Apache. One particular page in the application is experiencing a slow loading time of 13-14 sec ...

javascriptjavajbossdojo

Maintain consistent theme across various pages using javascript

So I successfully implemented a dark mode on the front page using the following script (sourced from W3schools) : <script> function darklightmode() { var element = document.body; element.classList.toggle("dmode"); } </script> ...

javascripthtmlcssdarkmode

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

javascripthtmlcssweb

Desiring the ability to retrieve a JSON response from a Laravel controller for use in my javascript code

I am trying to figure out the best way to fetch data from my Laravel controller and show it using JavaScript on a webpage. How should I approach this? Here is the code snippet of my controller and ajax call: var jq = jQuery.noConflict(); var id = jq(" ...

javascriptjsonajaxlaravel

Using jQuery to dynamically add a class to elements that have tab focus

I want to apply a css class to elements that are focused by the tab key, without adding the class when focused by a mouse click. I have managed to achieve this using jQuery with the focusin and focusout events. Here is the code that I currently have: $( ...

javascriptjqueryasp.net

A capability that operates on an array of pairs as its parameter, where the primary component of each pair signifies the superior category of the secondary

I'm grappling with developing a TypeScript function that takes an array of Tuples as input. Each tuple should consist of two elements, where the first element acts as a parent type to the second element - essentially, the second element must extend th ...

javascripttypescripttypestypescript-generics

Issue: Encountered a problem when attempting to encode the data type ([object Object]) into a Firestore Value while using Node

While attempting to insert a document with the geopoint dataType in firestore using the following instance: new firebase.firestore.GeoPoint(latitude, longitude) I encountered the following error. https://i.sstatic.net/yKuIs.png ...

javascriptnode.jsexpressfirebasegoogle-cloud-firestore

The simultaneous use of trackball controls and GUI is not compatible

When I click on them, the GUI changes together and I have looked at other answers. However, I am not sure where to put the listener. I tried putting the listener in render(), but it still doesn't work. How can I fix my code? This coding is related to ...

javascriptthree.js

Executing a Knex RAW MySQL query to insert new records into a database table

As someone new to working with MySQL, I have previously used PSQL in a similar manner. However, the following code is generating an error. return await db .raw( `INSERT INTO users(firstName, lastName, email, ...

javascriptmysqlnode.jsexpressknex.js

CSS: elements that are only visible when positioned above specific elements

Can we create an element that is only visible above specific other elements? For instance, in the following code snippet, I want the .reflection element to be visible only above the .reflective elements (located at the top and bottom) and not visible on t ...

javascripthtmlcss

Tips for globally overriding MUIv4 class in JSS for nested themes

Summary: Skip to EDIT2 MUIv4 has generated the following classes for me based on my nested theming: <label class="MuiFormLabel-root-121 MuiInputLabel-root-113 MuiInputLabel-formControl-115 MuiInputLabel-animated-118 MuiInputLabel-shrink-117 M ...

javascriptcssreactjsmaterial-ui

Incorporating promises with ajax to enhance functionality in change events

Consider the scenario where you trigger an ajax request upon a change event in the following manner: MyClass.prototype.bindChangeEvent = function(){ $(document).on('change', '#elementid', function(){ var $element = $(this); $ ...

javascriptjqueryajaxpromise

An error of '______ is not defined' was thrown, I'm puzzled as to why

I keep encountering an error that says "weekday is not defined". I'm unsure of the reason behind this issue. Any assistance would be greatly appreciated! (function(exports) { var days = ["monday", "tuesday", "wednesday", "thursday"]; exports. ...

javascript

Issue with dropdown list removeClass function

I am encountering an issue with the Jquery dropdown list click function. The addClass method is working properly, but the removeClass method is not functioning as expected. When I click on the dropdown list, it does not hide. Here is a live demo: http://j ...

javascriptjqueryhtmlcss

Is it possible to include three sorting states in jQuery DataTables: ASC, DESC, and NO_SORT?

When clicking on a column header in jQuery DataTables, the sorting order toggles between ascending (Down Arrow) and descending (Up Arrow). However, I am looking to customize this behavior: 1st-click ascending 2nd-click descending 3rd-click no-sorting 4th- ...

javascriptjquerydatatabledatatables

Struggling to log the values emitted from socket.io and express-nodejs

Having an issue with socket.io where the code is not emitting a value on a specific route. It works fine on the '/' route, but once I click submit and the route changes to '/process_post', I am unable to catch the emitted values by sock ...

javascriptnode.jssocketsexpress

Tips for incorporating AngularJS with dynamically added elements

Essentially, I have a structure similar to this example The formula for every cell in the last column should be: value[i][2] = value[i-1][2] + value[i][0] - value[i][1] I'm currently facing two issues. The first one arises when attempting to progra ...

javascripthtmlangularjsangularjs-scopeappendchild