Skip to content
This repository has been archived by the owner on Sep 7, 2020. It is now read-only.

slash escaped with statically generated content #1252

Open
tolysz opened this issue Jun 17, 2018 · 17 comments
Open

slash escaped with statically generated content #1252

tolysz opened this issue Jun 17, 2018 · 17 comments

Comments

@tolysz
Copy link

tolysz commented Jun 17, 2018

Hi I am playing with the tutorial, the generated paths for the static version
npm run build have incorrectly escaped slash %2F

http://localhost:3000/phenomic/content%2Fposts/by-default/1/desc/date/limit-2/after-MDItc2Vjb25kLXBvc3Q%3D.json

It works if I manually edit it in the url:

http://localhost:3000/phenomic/content/posts/by-default/1/desc/date/limit-2/after-MDItc2Vjb25kLXBvc3Q%3D.json

It has phenomic/content%2F but it should have phenomic/content/, not sure who is generationg those.

My server does not magically unescape the escaped sequences.

@MoOx
Copy link
Owner

MoOx commented Jun 18, 2018

These slashes are totally normal as our api server have static routes defined with specific parts for the path. Should not cause any troubles in practise.

What are the actual error(s) you are facing?

@tolysz
Copy link
Author

tolysz commented Jun 18, 2018

The server gets a request for http://localhost:3000/phenomic/content%2Fposts/ and the file is living at http://localhost:3000/phenomic/content/posts/. Thus there is no file to serve and no content to display.
It only shows when I build the static version and serve it via an HTTP server.

My guess is that you urlify or escape slashes too much.

@MoOx
Copy link
Owner

MoOx commented Jun 18, 2018

What are you using for serving static version?

@jctf
Copy link

jctf commented Jul 2, 2018

Hi @MoOx, even for me this it's a bit strange.

When serving the static content on netlify everything works fine.
But when you deploy it to hosteurope or one it's doesn't work.

When you manipulate the path, by replacing the %2F with / then everything works fine.

@MoOx
Copy link
Owner

MoOx commented Jul 3, 2018

Problem is that during development, I am not sure / will work for express dev server.
We need to investigate this (sorry I am still in afk/vacations).

@tolysz
Copy link
Author

tolysz commented Jul 3, 2018

The development server works fine; I guess it does some magic with urlDecode. The problem is when deployed to an external simple web server.

@MoOx
Copy link
Owner

MoOx commented Jul 27, 2018

Are you sure about development? Express routes for the api should not work...

@aralshawa
Copy link

Interestingly I'm experiencing the same behaviour: it works fine with the development server as well as using serve and now. Once I move to my chosen static hosting offering, requests for content with the %2F encoding fail with a 404. Traditionally, / and %2F are semantically different though can typically be used to suggest the same thing; however, per the W3 URL addressing recommendations, an encoded backslash has no hierarchical significance. By default, Apache takes this literally and one will need to enable the AllowEncodedSlashes directive which allows URLs to have encoded path separators.

@smurphy8
Copy link

smurphy8 commented Nov 1, 2019

Having the same problem! When I try to run with a simple web server against the dist folder I get hit with this error.
Is there some way of telling phenomic not to generate the api part?

@MoOx
Copy link
Owner

MoOx commented Nov 1, 2019

@smurphy8 you can just omit the script tag at the bottom in a custom Html template https://github.com/phenomic/phenomic/blob/1a896add371a7903f9633457104f2caff78736c3/examples/react-app-blog/Html.js#L28 then the frontend won't try to load js, and you will basically have a html website (api will still be generated, but not used)

@smurphy8
Copy link

smurphy8 commented Nov 1, 2019

Okay I will give that a try

@smurphy8
Copy link

smurphy8 commented Nov 3, 2019

Well the problem is I am using the Reason/React app which does the Html rendering in

https://github.com/phenomic/phenomic/blob/master/packages/plugin-renderer-react/src/renderHTML.js#L42

I think?

But I can't seem to build my own version of the preset app with the script tag taken out because I get a module not found error.

Gonna keep trying but worried I am going down the wrong rabbit hole or something!

@MoOx
Copy link
Owner

MoOx commented Nov 3, 2019

You can just throw a custom Html.js, even if you use reasonml.
Like I do :D https://github.com/MoOx/moox.io/blob/d8e6124f73bc27b0c1e341f5bae292186e46723b/Html.js

This should work by just dropping a Html.js file at the root of your project :)

@smurphy8
Copy link

smurphy8 commented Nov 3, 2019

<script id="PhenomicHydration" type="text/json">{"path=content%2Fposts&by=defa...

is still being generated inside the <body> tag .

@smurphy8
Copy link

smurphy8 commented Nov 3, 2019

It seems like the script that is calling the json is inside the body. My template looks like...

// @flow

import * as React from "react";
import { Helmet } from "react-helmet";
import { AppRegistry } from "react-native-web";

const Html = ({ App, render }: PhenomicHtmlPropsType) => {
  AppRegistry.registerComponent("App", () => App);
  const app = AppRegistry.getApplication("App");
  const { Main, State, Style } = render(app.element);
  const head = Helmet.renderStatic();
  return (
    <html {...head.htmlAttributes.toComponent()}>
      <head>
        {head.meta.toComponent()}
        {head.title.toComponent()}
        {head.base.toComponent()}
        {app.getStyleElement()}
        <Style />
        {head.link.toComponent()}
        {head.style.toComponent()}
        {head.script.toComponent()}
        {head.noscript.toComponent()}
      </head>
      <body {...head.bodyAttributes.toComponent()}>
        <Main />
        <State />
      </body>
    </html>
  );
};

export default Html;

@MoOx
Copy link
Owner

MoOx commented Nov 3, 2019

@smurphy8 try removing <State /> :D

@smurphy8
Copy link

smurphy8 commented Nov 4, 2019

well that didn't work but I just modded my server to handle the %2F ... Fixed!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants