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

Seeking a sleeker approach to composing various components with shared functions

Currently, I have a scenario where I have identical components that display data but also need to handle state manipulation and saving. There are 5 other similar components with slight differences in their functions. I am looking for a more efficient way t ...

Dynamic way to fetch computed properties in VueJS

I am trying to find a way to calculate the sum of computed properties that begin with the string calculateSum. The challenge is that I cannot access their names using this.computed. Here is my approach: getSubTotal(){ var computed_names = []; var ...

How can complex POST parameters be structured in a RESTful API?

For my current project, I am working on developing an application utilizing node.js along with express. This application involves a feature that allows users to subscribe to lists of items. Each subscription includes specific options such as minimum scores ...

Jose authentication is encountering issues with verifying JWT

My Next.js/Clerk.js middleware setup looks like this: import { authMiddleware } from "@clerk/nextjs"; import { jwtVerify } from "jose"; export default authMiddleware({ publicRoutes: ["/", "/contact", "/pricin ...

When attempting to access AJAX JSON properties using an index within a promise, the result returned is undefined

I have a quiz app that communicates with my server's API using MongoDB. I am trying to access the response indexes in this way: setTimeout(() => { axios.get('/api/ninjas') .then(function (questions) { var data = questions.d ...

Creating a dynamic word cloud in D3: Learn how to automatically adjust font sizes to prevent overflow and scale words to fit any screen size

I am currently utilizing Jason Davies' d3-cloud.js to create my word cloud, you can view it here 1. I'm encountering an issue where the words run out of space when the initial window size is too small. To address this, I have a function that cal ...

Creating a dropdown menu using Vue.js

My latest project involves coding an html page that features a drop-down list using HTML, CSS, and VueJS. The goal is to have something displayed in the console when a specific option from the drop-down list is selected. Here's the snippet of my html ...

What is the best way to remove the excess numbers from the return date provided by the react-date-picker?

I need help displaying only the Month and Day with the format "Tue Oct 22 2019". Currently, I am getting "Tue Oct 22 2019 00:00:00 GMT-0700 (Mountain Standard Time)" when using "react-date-picker". How can I achieve this without having to truncate the te ...

Getting rid of the scrollbar in Internet Explorer

Instead of just removing the scrollbar, I want to ensure that scrolling capabilities remain intact. This is important because I want to create a 'slide show' effect on the website where users can click 'next' and scroll through content ...

JavaScript JSON function failing to show

I apologize for my limited knowledge on this matter... We are currently facing an issue with our website's pricing page. The dynamic calculator, which should display the price based on user input of size width and quantity, is not functioning as expe ...

Issue with preventDefault not functioning correctly within a Bootstrap popover when trying to submit a

I am facing an issue with a bootstrap popover element containing a form. Even though I use preventDefault() when the form is submitted, it does not actually prevent the submit action. Interestingly, when I replace the popover with a modal, the functional ...

Troubleshooting a Peculiar Problem with Form Submission in IE10

Please take a look at the code snippet provided below: <!DOCTYPE html> <html> <body> <form name="editProfileForm" method="post" action="profileDataCollection.do"> <input type="text" id="credit-card" name="credit-card" onfocu ...

Issues with routing on Zeit Now platform are causing a 404 NOT FOUND error when attempting to reload pages that are not the

Recently, I purchased a Next.js template from Themeforest and attempted to deploy it to Zeit Now. This particular project is set up as a monorepo using Lerna and Yarn workspace. The code for the Next.js app can be found inside the packages/landing folder. ...

Creating a popup contact form with jQuery AJAX

I am currently working on setting up a contact form within a jQuery popup box. The idea is that when you click submit, it will utilize AJAX and a PHP script to send the email. However, I am facing an issue where the form does not seem to be working as inte ...

How can the top height of a jquery dialog be reduced?

Just starting out with jquery, I've got a dialog box and I'm looking to decrease the height of this red image: Is there a way to do it? I've already made changes in the jquery-ui.css code, like so: .ui-dialog { position: fixed; to ...

Achieving second class using jQuery from a choice of two

Looking for assistance with retrieving the second class from an element that has two different classes. I attempted to use the split method but encountered some issues, can anyone provide guidance? js_kp_main_list.find('li#kp_r_04').addClass(&ap ...

Is there a way for me to retrieve the text response of a fetch request from client-side JavaScript to fastify server?

In my fastify node.js application, I am encountering an issue where I can see the text results of a promise right before it is returned to the browser's JavaScript code. However, once the promise is returned to the browser JS, all I get is an empty st ...

Refreshing HTML tables with AJAX in Django

After going through all the posts here, I found that some are outdated and others don't quite match my issue. Apologies for bringing it up again. I have a basic HTML table with data in it. My goal is to update this data without refreshing the entire ...

What is the method to designate the initial value of a <select> tag within a React component?

I am working with a basic <select> element that is looping through a set of options: <select onChange={(event) => this.setState({selectedOption: event.target.value }) }> { this.state.options.map(option => <option key={option.label} ...

Send the context parameter value of Unified Service Desk to a JavaScript web resource in CRM

Currently, I am working on CRM 8.2 and Unified Service Desk 4.1. I have a specific requirement where I need to pass parameter values from within Unified Service Desk Data Parameters to a JavaScript Webresource. I have come across some resources that sugge ...