topic Re: Splunk JS Stack not working from external web page in Splunk Dev

Splunk JS Stack not working from external web page.

friscos — Wed, 17 Jun 2020 23:10:44 GMT

Hi, I am trying very hard to embed Splunk in an external webpage using Splunk JavaScript stack but no luck so far.

I am trying a very simple example from here http://dev.splunk.com/view/SP-CAAAEWS

Anyone had luck connecting to splunk from external webpages using SplunkJS?

The difference from the example and my environment are Proxy and Scheme My environment is not https and there is no proxy.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Login Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css"/>
    <style type="text/css">
        .fail{
            color: red;
        }
        .main-area {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div class="main-area">
        <h2>Login Form</h2>
        <p>This page tests login and authentication. When you enter a 
            name and password, these credentials are used to log in 
            to Splunk.</p>
        <p>If login is successful, a session key is returned and stored 
            in a cookie, along with the username. Then, you are redirected 
            to another page that uses the same session key.</p>
        &lt;br/&gt;
        <p><b>Username:</b></p>
        <input id="usernamebox" type="text" value="admin">
        <p><b>Password:</b></p>
        <input id="pwbox" type="password" value="mypassword">
        &lt;br/&gt;
        <button class="btn" onclick="onLogin()">Log in</button>
        &lt;br/&gt;
        <div id="errorText"></div>
    </div>

    <script src="static/splunkjs/config.js"></script>

    <script>
        // Set the web site's base URL
        require.config({
            baseUrl: "/static"
        });

        // Log In button function
        function onLogin() {
            alert("Inside OnLogin");
            require([
                "jquery",
                "splunkjs/splunk",
            ], function($, jssdk) {
                alert('Inside Login');
                // Get the username and passwords
                var username = $("#usernamebox").val();
                var password = $("#pwbox").val();

                // Use the Splunk SDK for JavaScript to log in to Splunk

                // Create a Service object
                var http =  new jssdk.ProxyHttp("/proxy");
                var service = new jssdk.Service(http, {
                    username: username,
                    password: password,
                    scheme: "http",
                    host: "splunkdev", 
                    port: 8000
                });

                // Log in to Splunk
                service.login(function(err) {
                    alert('Inside Service Login');
                    // The session key and username are required for logging in
                    if (!err) {
                        var key = service.sessionKey;
                        // Save the session key and username in cookies
                        $.cookie("splunk_sessionkey", key);
                        $.cookie("splunk_username", username);

                        // Redirect to another page
                        window.location.href = "login_verify.html";  
                    }
                    else {
                        alert('Login Failed');
                        $("#errorText").empty().append("<p class='fail'>&lt;br/&gt;Login failed! See the console for error info.</p>");
                        console.error("Login failed: ", err);
                    }              
                });
            });
        }   
    </script>
</body>
</html>

Re: Splunk JS Stack not working from external web page

sloshburch — Tue, 18 Oct 2016 18:47:02 GMT

Remember that the SDKs use the splunkd REST endpoints.

You should see that the management interface in Splunk (also known as splunkd) is 8089 by default. In your example, you changed the port to 8000 which is likely the default web port. That will not work. This must connect to the management interface port.
I'm not sure you need the "/proxy" since there is no Splunk endpoint that uses that. I'll see if a peer can confirm.
The scheme needs to be https. Even though splunkweb is http, you're connecting to splunkd which is https by default. I highly doubt you went through the effort of disabling (if even possible) the splunkd https connection.

Re: Splunk JS Stack not working from external web page

friscos — Wed, 19 Oct 2016 01:16:28 GMT

Hi Burch,

I tried with https, 8089 port but no luck. I in fact tried all the combinations before posting it in the forum. I ran out of options now..

Re: Splunk JS Stack not working from external web page

sloshburch — Wed, 19 Oct 2016 12:20:30 GMT

What was the error when you used https, 8089, and no '/proxy'? Please also include the error message that appeared in $SPLUNK_HOME/var/log/splunk/splunkd.log

Re: Splunk JS Stack not working from external web page

friscos — Wed, 19 Oct 2016 14:37:26 GMT

Hi Burch,

I do not see the request reaching the server. There is no request information logged in splunkd.log.

I am not able to attach screenshots. here are the error messages:

Code Snippet (with /proxy and https):

<script>
 splunkjs.config({
        proxyPath: '/proxy',
        scheme: 'https',
        host: 'splunkdev.com',
        port: 8089,
        authenticate: {username: 'admin', password: 'test123'}
    });
</script>

Error message on js console:

mvc.js:8819 POST http://localhost:6080/proxy/services/auth/login?output_mode=json 404 (Not Found)send @ mvc.js:8819ajax @ mvc.js:8249makeRequest @ mvc.js:24517request @ mvc.js:20231(anonymous function) @ mvc.js:19028post @ mvc.js:20166(anonymous function) @ mvc.js:19028login @ mvc.js:19746(anonymous function) @ mvc.js:19028authFunction @ mvc.js:70615loginLoad @ mvc.js:70634(anonymous function) @ mvc.js:70429execCb @ config.js:1636check @ config.js:872enable @ config.js:1143init @ config.js:780(anonymous function) @ config.js:1413
config.js:139 Uncaught Error: Login failed. Authenticate(done) received an error(anonymous function) @ mvc.js:70636(anonymous function) @ mvc.js:70617wrappedCallback @ mvc.js:19738wrappedCallback @ mvc.js:20212error @ mvc.js:24506(anonymous function) @ mvc.js:70831fire @ mvc.js:3161fireWith @ mvc.js:3273done @ mvc.js:8350callback @ mvc.js:8891


Code Snippet (with out proxy):

<script>
 splunkjs.config({
        proxyPath: '/',
        scheme: 'https',
        host: 'splunkdev.com',
        port: 8089,
        authenticate: {username: 'admin', password: 'test123'}
    });
</script>

Error message on js console:

config.js:164 Uncaught Error: Load timeout for modules: splunkjs/ready!_unnormalized2,splunkjs/ready!
http://requirejs.org/docs/errors.html#timeoutmakeError @ config.js:164checkLoaded @ config.js:690(anonymous function) @ config.js:711
mvc.js:8819 OPTIONS http://services/auth/login?output_mode=json net::ERR_CONNECTION_TIMED_OUTsend @ mvc.js:8819ajax @ mvc.js:8249makeRequest @ mvc.js:24517request @ mvc.js:20231(anonymous function) @ mvc.js:19028post @ mvc.js:20166(anonymous function) @ mvc.js:19028login @ mvc.js:19746(anonymous function) @ mvc.js:19028authFunction @ mvc.js:70615loginLoad @ mvc.js:70634(anonymous function) @ mvc.js:70429execCb @ config.js:1636check @ config.js:872enable @ config.js:1143init @ config.js:780(anonymous function) @ config.js:1413
config.js:139 Uncaught Error: Login failed. Authenticate(done) received an error

Re: Splunk JS Stack not working from external web page

sloshburch — Thu, 20 Oct 2016 21:26:59 GMT

So the first example shows a 404 (with proxy) so you're trying to reach something that's not there.

If this is on your local, why are you using splunkdev.com? Why not localhost?

In the second, I see the url after OPTIONS shows http://services/auth/login?output_mode=json. I'm confused why the host:port portion is missing.

The url that it should end up calling should be like:
https://localhost:8089/services/auth/login?output_mode=json
Notice the:

https
use of localhost
port 8089, not 8000 and not 6080
no /proxy

You can validate this is the endpoint on your system by navigating to https://localhost:8089/services/auth/login in your web browser.

Re: Splunk JS Stack not working from external web page

friscos — Fri, 21 Oct 2016 12:49:48 GMT

Burch,

localhost and 6080 is the hostname and port number of my local tomcat server. splunkdev and 8089 are the server hostname and port number.

Re: Splunk JS Stack not working from external web page

sloshburch — Fri, 21 Oct 2016 13:01:59 GMT

FYI. Splunk SDK for JavaScript version 1.8.1 was just released. Not sure if it addresses anything here but I wanted to let you know.

Re: Splunk JS Stack not working from external web page

sloshburch — Mon, 24 Oct 2016 16:07:08 GMT

Did a webex and discovered that this was not working because of the browsers security policies around Same Origin Policy. We verified this by running the node.exe that comes with the SDK and connecting to a local splunk install successfully.

@friscos is now attempting http://www.thegeekstuff.com/2016/09/disable-same-origin-policy/ to allow his browser to connect to his remote Splunk instance.

Obviously the final solution must contain a proxy on the webserver to address this browser restriction in production.

Re: Splunk JS Stack not working from external web page

sloshburch — Tue, 01 Nov 2016 20:10:56 GMT

Update from our webex: The javascript SDK comes with a node server that can abstract the cross domain challenge. It's actually all explained in the dev docs @ http://dev.splunk.com/view/javascript-sdk/SP-CAAAEWQ

Re: Splunk JS Stack not working from external web page

AshChakor — Tue, 30 Apr 2019 13:42:12 GMT

Hi SloshBurch ,
I followed all the examples and its working fine with the node server.
How do I configure it on IIS server to work as a Proxy for connecting to Splunk Web from outside? Can you please share settings on IIS server, if i need to add proxy-pass in web.conf, if there is any snippet that you can share?

Thanks in advance.

Re: Splunk JS Stack not working from external web page

sloshburch — Fri, 07 Jun 2019 13:29:25 GMT

@AshChakor - My memory is failing me now (the rest of the thread was three years ago) . I can't speak to how to set it up on IIS (not my background). When I navigate to the web.conf spec file and search for proxy a number of settings are discovered. Although maybe your best luck will come from one of these pages: https://docs.splunk.com/Special:SplunkSearch/docs?q=proxy

Sorry I can't be of more help here. Feel free to post a new question with your specifics to get more attention to your needs. Or a support ticket of course. Lastly, your account team might be able to provide more guidance.

Sorry, I wish I was smarter 😞