Ajax script causes error 403 when loading content while scrolling

Currently in the process of creating a blog using the HubSpot platform. The primary goal is to have blog posts load dynamically as users scroll down the page. I came across a script that claims to achieve this functionality and is designed specifically for use with HubSpot.

However, upon implementing the script and testing it, I encountered a 403 error in the console when trying to activate it by scrolling. It seems that this issue may be related more to Ajax than to HubSpot itself.

The script I am utilizing can be found at the following URL: www.example.com/swoosh/

Alternatively, the script hosted on our HubSpot CDN can be accessed here:

For reference, the blog can be viewed at the following link:

One potential issue that stands out to me is that the Ajax request is cross-domain. However, given that cross-domain requests are common within HubSpot for files and company domains, I would expect the script's creator to have anticipated and addressed this.

Despite my efforts to find a solution, I have been unsuccessful thus far. It should be noted that a PHP proxy is not a viable option due to the limitations imposed by server-side programming in HubSpot.

Any assistance or advice on how to proceed with this issue would be greatly appreciated.

$(document).ready(function(){
    $(".grid").swoosh();
});



(function(a) {
a.fn.swoosh = function(f, k) {
    if (!f) {
        f = "Loading..."
    }
    if (k == null) {
        k = -1
    }
    var c = this;
    var e = false;
    var j = 2;
    var d = window.location.href.toString().split("/");
    var i = d[0] + "//" + d[2] + "/" + d[3] + "/";
    var h = i + "page/";
    var g = "";
    var b = false;
    if (f != "Loading...") {
        c.parent().append('<div class="loading"><img src="' + f + '"></div>');
    } else {
        c.parent().append('<div class="loading">' + f + "</div>");
    }
    a(".loading").hide();
    a(document).scroll(function() {
        if (b || e || j == 0) {
            return false
        }
        if (a(window).scrollTop() >= a(document).height() - a(window).height() - a(".footer-container-wrapper").height() - 150) {
            b = true;
            a(".loading").fadeIn(200);
            g = h + j;
            a.post(g, function(m) {
                var l = a(m).find(".grid-item");
                      if (l.length) {
                          console.log(f);
                            a(".loading").fadeOut(200, function() {
                             l.appendTo(".grid")
                        });
                        j++;
                         a(".next-posts-link").attr("href", h + j)
                     } else {
                         e = true;
                         a(".next-posts-link").after('<div class="next-posts-link unactive">Next</div>');
                         a(".next-posts-link:not(.unactive)").remove();
                        a(".loading").fadeOut(200)
                        }
                        b = false;
                        setTimeout(function() {
                        twttr.widgets.load();
                        IN.parse();
                        FB.XFBML.parse();
                        gapi.plusone.go()
                    }, 350)
                })
             }
        })
    }
})(jQuery);
(function() {
    return window.SIG_EXT = {};
})()

Answer №1

Summary: The reason for the 403 error is due to the script using jQuery's .post instead of .get; making an http POST to a HubSpot COS/blog page is not permitted. This can be seen on line 45 of the raw js example available here:

To resolve the issue, switch the HTTP method to GET and continue troubleshooting. The script, although meant to be generic, is unofficial and relies heavily on specific body structure and element classes generated by HubSpot's COS/blog. Further debugging may be necessary to make it functional.


Additional Information: The functioning of this script is somewhat unrefined. Instead of fetching blog content from an API or another efficient source, it retrieves the full HTML of /page/2, /page/3, etc as you scroll, extracts the blog post HTML from the received response, and inserts these posts into the current page asynchronously.

The utilization of a POST request instead of a GET request to obtain this content results in a 403 Forbidden error.

There could be more challenges since the script relies significantly on specific elements being classified in a particular manner; nevertheless, this solution addresses the immediate 403 error.

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

What steps are involved in sending a POST request using AJAX and Firebase?

My data is stored in the URL domain/data.json with the following structure: [{ "title": "first thought", "content": { "desc":"This is the first thought", "img":"img.png" } }, { "title": "second thought", "content": { "desc":"This is the ...

Integrating custom non-NPM JavaScript files into Angular 2

Currently, the application I am working on is running in an environment with angular 2.0.0 final using typescript and also utilizes angular-cli 1.0.0-beta.15. Since the development of the application involves multiple developers who all use typescript, I ...

Multiple instances of Ajax drop-down effects are now available

On my website's staff page, I have implemented a dropdown menu using AJAX to display information about each member of the staff. The issue arises when attempting to open multiple dropdown menus on the same page - the second dropdown that is opened ten ...

Merge two arrays of objects containing Google Map coordinates

I am facing a challenge with merging two object arrays that have similar values. var Cars = [{ lat: 42, lng: -72 }, { lat: 40.7127837, lng: -74.0059413 }, { lat: 40.735657, lng: -74.1723667 }]; var Trucks = [{ lat: 43, lng ...

Is there a way to simulate a KeyboardEvent (DOM_VK_UP) that the browser will process as if it were actually pressed by the user?

Take a look at this code snippet inspired by this solution. <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <script> $(this). ...

Incorporating TypeScript into a project originally developed in JavaScript

I'm considering using TypeScript to write code for a JavaScript project. I've come to appreciate the benefits of TypeScript and am especially interested in using it for our AngularJS 1.5 project, which we plan to migrate soon. As I'm new to ...

Creating Class Names Dynamically in Angular 2 Using ngFor Index

Encountering an issue while trying to generate a dynamic class name based on the ngFor loop index in Angular 2. Due to restrictions, I had to use a specific syntax as Angular 2 does not support ngFor and ngIf together on the same element. Given this setup ...

The NextJS application briefly displays a restricted route component

I need to ensure that all routes containing 'dashboard' in the URL are protected globally. Currently, when I enter '/dashboard', the components display for about a second before redirecting to /login Is there a way to redirect users to ...

Is there a way to postpone these animations without relying on setTimeout?

As I develop a single-page website, my goal is to smoothly transition between sections by first animating out the current content and then animating in the new content. Currently, I have achieved this using setTimeout(), where I animate out the current con ...

What is the best way to retrieve the JSON data from a POST request made through AJAX to a PHP file and save it in an array variable?

My ajax request sends JSON data to a PHP file named 'receive.php'. user_name , user_id, etc. are defined at the beginning of my script but can be changed to anything else. Below is the JavaScript code I am using: const data = { name: user_na ...

Eliminating duplicate data submissions with jQuery Ajax

Encountering an issue with my jQuery AJAX submission process. JavaScript: $('#myform').submit(function () { if (validateEvenInputs()) { $('#btnevent').attr('disabled', 'disabled'); function ...

What is the best way to display the complete text or wrap a menu item in an Angular Material menu?

Is it possible to display the full text of a menu item instead of automatically converting it to ellipses or breaking the word? I've tried various CSS methods without success. Any suggestions? https://i.stack.imgur.com/3l7gE.png #html code <mat-m ...

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

Tips for steering clear of global variables while coding in JavaScript

What is the best way to avoid using global variables in JavaScript? //load more var totalItems = $("#myList li").size(); var startIndex = 3; $('#myList li:lt(' + startIndex + ')').show(); $('.loadmore').on('cli ...

How to launch a new window for a popup

How can I make IE8 open new windows as pop-ups without changing browser settings? I want to use JavaScript's window.open() function. Firefox opens new windows correctly, but IE8 opens them in tabs instead of pop-up windows. Any suggestions on how to a ...

What is the reason behind Chrome Dev Tools not automatically adding the parentheses when a method is selected?

In the console of Dev Tools, if you have an object named x with three methods/functions - a(), b(), and c(i, j, k), why doesn't it automatically insert the parentheses, along with the correct spaces for the parameters (similar to eclipse for Java) whe ...

Changing the color of text in an HTML input field using CSS and JavaScript depending on the input value

Looking for a solution! // Getting user input values var input1 = parseInt(document.getElementById("input1").value); var input2 = parseInt(document.getElementById("input2").value); var input3 = parseFloat(document.getElementById(" ...

Tips for incorporating your personal touch while utilizing Snipcart

I have created an ecommerce platform with GatsbyJS and Snipcart, but I am struggling to override the default theme provided by Snipcart. When I try to change the main default CSS through gatsby-config.js, it does not seem to work. Does anyone have a soluti ...

Sending data from a React application to a Node.js server using Axios

Hello, I am facing an issue with an axios request to post data to a Node.js server. When trying to access this data on the server, it is showing as undefined. Below is the function for posting data: function Submit() { let params={ firstName: ...

Experiencing a 404 error after attempting to access an endpoint following a successful MSAL Azure AD

Incorporating the UserAgentApplication.loginPopup function to authenticate users on our Azure AD has been a challenge as we transition from an ASP.NET MVC application to a Vue.js front end and ASP.NET 'API' backend. The goal is to pass the access ...